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

Question

我在表单中添加了两个字段；使用 JavaScript 的“事件数据”和“事件详细信息”。它方便用户添加任意数量的事件。除了以下两个问题外，一切都运行良好。如果我添加让我们说 5 个事件并删除编号。2 事件。我的其余事件的顺序是这样的，1,3,4,5但它们应该看起来像1,2,3,4另外，删除编号后。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) {

  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--;

  resetValues(); //call to reset values

  if (tableCount < 1) {

    tableCount = 1;

  }

  return false;

});

function resetValues() {

  counter = 2; //initialze to 2 because 1 is fixed

  //looping through table not first one

  $(".tg:not(:first)").each(function() {

    //find .aa class replace its counter

    $(this).find('.aa').text(counter);

    $(this).attr('id', "timeTable" + counter);

    counter++;

  })

}

<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>