时间戳

首页 > 解决方案 > 添加动态顺序添加删除html输入字段

javascript - 添加动态顺序添加删除html输入字段

问题描述

我有这个添加/删除动态输入的代码：

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

演示在这里

更新：（我的需要）

在此处输入图像描述

标签： javascripthtmljquery

解决方案

您只需要修改 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--;
  });
});

click 函数将多一个参数 count 用于渲染/显示 order 字段中的计数值。

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

推荐阅读