javascript - 动态添加/删除 html 元素数组结构

Question

我正在使用 jQuery 和 JavaScript 添加/删除 HTML 元素。在那种情况下，我删除了特定的 html 元素

代码如下

$(document).ready(function() {
  var i = 1;
  $("#plus").click(function() {
    i++;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(" + i + ")' class='btn btn-warning btn-sm'>-</button></td></tr>");
  });
});

function delrow(num) {
  var element = document.getElementById("rownum_" + num);
  element.parentNode.removeChild(element);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm">+</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(1)' class='btn btn-warning btn-sm'>-</button></td>
    </tr>
  </tbody>
</table>

使用这段代码，我添加了像索引 1,2,3,4,5,6 这样的元素，并删除了一些像 3,4,5 这样的元素索引，这些元素将被删除。在我们添加任何元素后，它们以 7,8,9 开头并显示索引，如 1,2,6,7,8,9现在总元素是 6。如何管理？ ，我想得到像 1,2,3,4,5,6 这样的索引

Answer 1

我认为处理对表的插入和更新的最佳方法是保留一个单独的函数 resetRowIndex 来为每个 tr 分配行号，而不用担心插入或删除时的索引。 resetRowIndex 函数可以在每次插入或删除后调用，以重置每条记录的索引。

$(document).ready(function() {
  resetRowIndex();

  $("#plus").click(function() {
    var i = 0;
    $('#editrow').append("+<tr id=rownum_" + i + "><td>" + i + "</td>" +
      "<td><input type='text' id='cid_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='lac_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mnc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><input type='text' id='mcc_" + i + "' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>" +
      "<td><button type='button' id=" + i + " onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td></tr>");
      
      resetRowIndex();
  });
});

function delrow(event) {
  var element = $(event.target).closest("tr");
  element.remove();
  
  resetRowIndex();
}

function resetRowIndex() {
  var idx = 0;
  $("#editrow tr").each(function() {
    $(this).find("td").first().text($(this).index() + 1);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>CID</th>
      <th>LAC</th>
      <th>MNC</th>
      <th>MCC</th>
      <th align="right"><button id="plus" type="button" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign">Add</span></button></th>
    </tr>
  </thead>
  <tbody id="editrow">
    <tr id=rownum_1>
      <td>1</td>
      <td><input type='text' id='cid_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='lac_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mnc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><input type='text' id='mcc_1' class='form-control input-sm' pattern='[0-9]{1-10}' required></td>
      <td><button type='button' id=1 onClick='delrow(event)' class='btn btn-warning btn-sm'><span class='glyphicon glyphicon-remove-sign'>Remove</span></button></td>
    </tr>
  </tbody>
</table>

<子>尽管这不是最佳方式，但它可能是最简单的方式。如果您打算使其达到最佳状态，您可以编写一些逻辑来跟踪被删除的号码，并更新后续记录等。