Dynamische Anpassung der Feldsequenz bei der Entfernungsmethode

Question

Ich habe meinem Formular zwei Felder hinzugefügt. "Ereignisdaten" und "Ereignisdetails" mit JavaScript. Es erleichtert dem Benutzer, so viele Ereignisse hinzuzufügen, wie er möchte. Bis auf die folgenden beiden Punkte funktioniert alles einwandfrei.

1. Wenn ich 5 Ereignisse hinzufüge, entfernen Sie die Nr. 2 Veranstaltung. Die Reihenfolge der restlichen Ereignisse ist wie folgt, 1,3,4,5aber sie sollen so aussehen1,2,3,4

2. Auch nach dem Entfernen der Nr. 2 Ereignis, wenn ich das neue Ereignis hinzufüge, wird es unter Nummer 5 erstellt; so sieht meine Abfolge von Ereignissen so aus 1,3,4,5,5..

Wie kann ich mein Skript so ändern, dass meine Ereignisse automatisch neu angeordnet werden?

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

Sie können eine Funktion erstellen, die jedes Mal aufgerufen wird, wenn Sie auf die Schaltfläche "Entfernen" klicken. In dieser Funktion müssen Sie alle Tabellen durchlaufen, wobei die erste übrig bleibt, und dann .find()einen neuen Wert hinzufügen, dh: countzu dem td, wo 1,2..etcangezeigt wird. Außerdem müssen Sie Ändern Sie die ID Ihrer Tabelle mit$(this).attr("id", "timeTable" + newvalue);

Demo-Code :

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>