在 remove 方法上动态重新调整字段序列

Question

我在表单中添加了两个字段；使用 JavaScript 的“事件数据”和“事件详细信息”。它方便用户添加任意数量的事件。除了以下两个问题外，一切都运行良好。

1. 如果我添加让我们说 5 个事件并删除编号。2 事件。我的其余事件的顺序是这样的，1,3,4,5但它们应该看起来像1,2,3,4

2. 另外，删除编号后。2 事件，如果我添加新事件，它会在编号 5 处创建；所以我的事件顺序看起来像这样1,3,4,5,5..

如何修改我的脚本以使我的事件自动重新排列？

var tableCount = 1;

var index = 1;

$(document).on('click', 'button.add_time', function(e) {

  e.preventDefault();

  tableCount++;

  $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');

  $('#timeTable' + tableCount).find("input").val("");

  index++;

  $('#timeTable' + tableCount + ' .aa').html(tableCount);

});

$(document).on('click', 'button.removeTime', function() {

  var closestTable = $(this).closest('table');

  if (closestTable.attr('id') != "timeTable") {

    closestTable.remove();

  }

  tableCount--;

  if (tableCount < 1) {

    tableCount = 1;

  }

  return false;

});

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="table" class="form-group">

  <table id="timeTable" class="tg">

    <tr class="form-group">

      <td class="aa">1</td>

      <td class="tg-yw4">

        <button class="btn form-control btn-danger removeTime">Remove Events</button>

      </td>

      <td class="col-sm-4">

        <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')">

      </td>

    </tr>

    <tr>

      <td class="aa">1</td>

      <td class="tg-yw4">Event Description:</td>

      <td>

        <input name="event_descriptions[]" type="text" placeholder="Event description:" />

      </td>

    </tr>

  </table>

</div>

<div class="my-5">

  <button class="add_time btn btn-info">Add More Events</button>

</div>

Answer 1

您可以创建一些函数，每次单击删除按钮时都会调用该函数。在此函数中，您需要遍历所有表，留下第一个表，然后用于添加.find()新值，即：count到显示的那个 td 1,2..etc。此外，您需要使用更改表的 ID$(this).attr("id", "timeTable" + newvalue);演示代码：var tableCount = 1;var index = 1;$(document).on('click', 'button.add_time', function(e) {&nbsp; e.preventDefault();&nbsp; tableCount++;&nbsp; $('#timeTable').clone().attr('id', "timeTable" + tableCount).appendTo('#table');&nbsp; $('#timeTable' + tableCount).find("input").val("");&nbsp; index++;&nbsp; $('#timeTable' + tableCount + ' .aa').html(tableCount);});$(document).on('click', 'button.removeTime', function() {&nbsp; var closestTable = $(this).closest('table');&nbsp; if (closestTable.attr('id') != "timeTable") {&nbsp; &nbsp; closestTable.remove();&nbsp; }&nbsp; tableCount--;&nbsp; resetValues(); //call to reset values&nbsp; if (tableCount < 1) {&nbsp; &nbsp; tableCount = 1;&nbsp; }&nbsp; return false;});function resetValues() {&nbsp; counter = 2; //initialze to 2 because 1 is fixed&nbsp; //looping through table not first one&nbsp; $(".tg:not(:first)").each(function() {&nbsp; &nbsp; //find .aa class replace its counter&nbsp; &nbsp; $(this).find('.aa').text(counter);&nbsp; &nbsp; $(this).attr('id', "timeTable" + counter);&nbsp; &nbsp; counter++;&nbsp; })}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="table" class="form-group">&nbsp; <table id="timeTable" class="tg">&nbsp; &nbsp; <tr class="form-group">&nbsp; &nbsp; &nbsp; <td class="aa">1</td>&nbsp; &nbsp; &nbsp; <td class="tg-yw4">&nbsp; &nbsp; &nbsp; &nbsp; <button class="btn form-control btn-danger removeTime">Remove Events</button>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="col-sm-4">&nbsp; &nbsp; &nbsp; &nbsp; <input placeholder="Event Date" name="events[]" class="input-lg" type="text" onfocus="(this.type='date')">&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="aa">1</td>&nbsp; &nbsp; &nbsp; <td class="tg-yw4">Event Description:</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; <input name="event_descriptions[]" type="text" placeholder="Event description:" />&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </table></div><div class="my-5">&nbsp; <button class="add_time btn btn-info">Add More Events</button></div>