Question

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

以下代码

＆＃13;

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

＆＃13;

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

＆＃13;

使用此代码我添加像索引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来重置每条记录的索引。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: