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>

此代码对我来说确实有效，但是如何为每行（from 1 to ...）添加动态顺序（td）。我的意思是从1号输入加号，然后从最后一个编号加+1。

demo is here

更新：（我的需要）

Answer 1

您只需要修改JS代码逻辑即可。下面的示例显示了变量计数的用法及其用法。在这里，变量count最初被声明为1，然后单击“添加”，将计数值增加1。以同样的方式，当我们删除/删除“ tr”列时，计数将减少1。 / p>

$(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--;
  });
});

click函数将具有一个以上的参数计数，用于在订单字段中呈现/显示计数值。

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 行，并以增量方式更新订单行。

 $("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--;
});

添加动态订单以添加删除html输入字段

1 个答案: