删除 table 行并重新索引数字

Question

我在删除和重新索引行数方面遇到困难。

例如，数出 7 6 5 4 3 2 1 这样的数字。删除后 3 我要他们就像 6 5 4 3 2 1。我该怎么做？

function barcodeEntry(barcode) {
  if (barcode.length == 3) {
    var productCount = document.querySelectorAll('.barcodeNumber').length;
    var barcodeTable = document.getElementById("barcode_table");
    
    var rowHtml = "";
    rowHtml = '<tr>';

    if (productCount == 0) {
      rowHtml += '<td class="product-count text-right">' + 1 + '</td>'
    } else {
      productCount++;
      rowHtml += '<td class="product-count text-right">' + productCount + '</td>'
    }
    rowHtml += '<td class="barcodeNumber pl-5" >' + barcode + '</td>'
    rowHtml += '<td class="delete-btn">' + '<a class="mr-2 trash-btn"  >' + 'Delete' + '</a>' + '</td>'
    rowHtml += '</tr>';

    $("#barcode_table").prepend(rowHtml)
    
    $('.trash-btn').on('click', function() {
      $(this).closest("tr").remove();
    })
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<input id="barcodeInput" onkeyup="barcodeEntry(this.value)" />

<table class="w-100">
  <thead>
    <tr class="d-flex justify-content-around">
      <th>
        Count
      </th>
      <th class="pr-5">
        Barcode No
      </th>
      <th></th>
    </tr>
  </thead>
  <tbody id="barcode_table"></tbody>
</table>

jsFiddle link: https://jsfiddle.net/Aycan/8r7xd5us/1/

当我在输入中输入数字时，它们会按照我的意愿添加到 table。最后计数应该在顶部。在这个例子中它是这样工作的。但是当我删除一个 td 时，计数也被删除，但它们没有降序。如果计算数字 3 2 1 并且我删除了 2，它会显示 3 1。我想要的是如果我删除 td 其他人再次索引并且 excep 3 1 它应该是 2 1.

Answer 1

请使用此代码。

...

$('.trash-btn').on('click', function() {
  $(this).closest("tr").remove();
  const rows = document.querySelectorAll(".product-count");
  [...rows].map((val, index) => {
    val.innerHTML = [...rows].length - index;
  });
})

...

删除 table 行并重新索引数字

Deleting table row and re-indexing the numbers

javascript

indexing

jquery

row