在删除方法上动态重新调整字段顺序 [英] Dynamically readjusting fields sequence on remove method

问题描述

我在表单中添加了两个字段；事件数据"和事件详细信息"使用JavaScript.它使用户可以添加任意数量的事件.除了以下两个问题之外，一切都工作正常.

I added two fields in my form; "Event Data" and "Event Details" using JavaScript. It facilitates the user to add as many events as he wants. Everything is working perfect except the following two issues.

1. 如果我添加5个事件，然后删除否.2事件.我其余事件的顺序如下: 1,3,4,5 ，但它们应该看起来像 1,2,3,4

1. If I add let's say 5 events and remove the no. 2 event. The sequence of the rest of my events is like this 1,3,4,5 but they are supposed to look like 1,2,3,4

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

Also, after removal of the no. 2 event, if I add the new event, it is created at number 5; so my sequence of events looks like this 1,3,4,5,5..

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

How can I modify my script to make my events rearrange automatically?

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>

推荐答案

您可以创建一些每次单击删除按钮时都会调用的函数.在此函数中，您需要遍历所有表，并保留第一个表，然后使用 .find()添加新值，即: count 到显示 1,2..etc 的那个td.此外，您还需要更改使用 $(this).attr("id"，"timeTable" + newvalue);

You can create some function which will get called everytime you clicked on remove button .In this function you need to loop through all tables leaving first one and then use .find() to add new value i.e : count to that td where 1,2..etc are displayed.Also , you need to change id of your table using $(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>

这篇关于在删除方法上动态重新调整字段顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！