删除表格行并重新索引数字

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 链接：https://jsfiddle.net/Aycan/8r7xd5us/1/

• 当我在输入中写入数字时，它们会按照我的意愿添加到表格中。最后计数应该在顶部。在这个例子中它就是这样工作的。但是当我删除一个 td 时，计数也被删除，但它们不是降序的。如果计数数字 3 2 1 并且我删除了 2，它显示我 3 1。我想要的是如果我再次删除 td 其他索引并且除了 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;
  });
})

...