添加動態訂單添加刪除html輸入字段

Question

我有這個添加/刪除動態輸入的代碼：

JS：

$(function () {
    $("#btnAdd").bind("click", function () {
        var div = $("<tr />");
        div.html(GetDynamicTextBox(""));
        $("#TextBoxContainer").append(div);
    });
    $("body").on("click", ".remove", function () {
        $(this).closest("tr").remove();
    });
});
function GetDynamicTextBox(value) {
  var number = Math.random();
    return '<td id="' + number + '"><input name = "DynamicTextBox" type="text" value = "' + value + '" class="form-control" /></td>' + '<td><select name="" class="form-control"><option> Select</option><option> Male</option><option> Female</option></select></td>' + '<td><input name = "DynamicTextBox" type="radio" value = "' + value + '" /></td>' + '<td><input name = "DynamicTextBox" type="checkbox" value = "' + value + '" /></td>'+'<td><input name = "order" type="number" value = "" /></td>' + '<td><button type="button" class="btn btn-danger remove"><i class="fas fa-times"></i></button></td>'
}

HTML：

<p>&nbsp;</p>
<h5 class="text-center">Dynamic Control : Text Box, Dropdown List, Radiobox and Checkbox</h5>
<section class="container">
<div class="table table-responsive">
<table class="table table-responsive table-striped table-bordered">
<thead>
    <tr>
        <td>TextBox</td>
        <td>Dropdown List</td>
        <td>Radio</td>
        <td>CheckBox</td>
        <td>Order</td>
        <td>BTN</td>
    </tr>
</thead>
<tbody id="TextBoxContainer">
</tbody>
<tfoot>
  <tr>
    <th colspan="5">
    <button id="btnAdd" type="button" class="btn btn-primary" data-toggle="tooltip" data-original-title="Add more controls"><i class="fas fa-plus"></i>&nbsp; Add&nbsp;</button></th>
  </tr>
</tfoot>
</table>
</div>
</section>

這段代碼對我來說是正確的，但是我如何為每一行（ td ）添加動態順序（ from 1 to... ）。 我的意思是從 1 號添加訂單輸入並從最后一個訂單號添加 +1 號。

演示在這里

更新：（我的需要）

Answer 1

您只需要修改 JS 代碼邏輯。 下面的示例顯示了變量計數的使用及其用法。 在這里，變量 count 最初聲明為 1，並且根據“添加”單擊，計數值已增加 1。同樣，當我們刪除/刪除“tr”列時，計數減少 1。

$(function () {
  var count = 1;
  $("#btnAdd").bind("click", function () {
    var div = $("<tr />");
    div.html(GetDynamicTextBox("", count));
    $("#TextBoxContainer").append(div);
    count++;
  });
  $("body").on("click", ".remove", function () {
    $(this).closest("tr").remove();
    count--;
  });
});

點擊 function 將多了一個參數 count，用於渲染/顯示訂單字段中的計數值。

function GetDynamicTextBox(value, count) {
  var number = Math.random();
  return '<td id="' + number + '">
            <input name = "DynamicTextBox" type="text" value = "' + value + '" class="form-control" />
          </td>' + '
          <td>
            <select name="" class="form-control">
              <option> Select</option>
              <option> Male</option>
              <option> Female</option>
            </select>
          </td>' + '
          <td>
            <input name = "DynamicTextBox" type="radio" value = "' + value + '" />
          </td>' + '
          <td>
            <input name = "DynamicTextBox" type="checkbox" value = "' + value + '" />
          </td>'+'
          <td>
            <input name = "order" type="number" value = "' + count + '" /></td>' + '
          <td>
            <button type="button" class="btn btn-danger remove"><i class="glyphicon glyphicon-remove-sign"></i></button>
          </td>'
}

當我們從最后一列中刪除行時，上面的代碼有效。 如果您從tr標簽列表中刪除中間行，您會發現順序列值排列不正確。

下面的代碼用於刪除行之間的tr標記以及最后一個 tr 標記中的tr標記。 此代碼可以靈活地從列表中的任何位置刪除tr行，以及以增量方式更新訂單行。

 $("body").on("click", ".remove", function () {
    var deleteElement = $(this).closest("tr");
    var countOfDeleteElement = $(deleteElement).find("#order").val();
    var lastElementCount = count - 1;
    if (countOfDeleteElement !== lastElementCount) {
      // It will come inside this if block when we are removing inbetween element.
      var remainingElements = deleteElement.nextAll('tr');  // get all the below elemnts from the removing element.
      // updating all remainingElements value of the order column
      remainingElements.each((i, ele) => {
        $(ele).find("#order").val(countOfDeleteElement);
        countOfDeleteElement++;
      })
    }
    deleteElement.remove();
    count--;
});