Блог

Главная - Вопросы по программированию - Удаление строки таблицы и повторная индексация чисел

Удаление строки таблицы и повторная индексация чисел

#javascript #jquery #indexing #row

Вопрос:

У меня возникли трудности с удалением и повторной индексацией количества строк.

Например, считайте такие числа, как 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. Я хочу, чтобы, если я снова удалю все остальные индексации и исключу 3 1, это должно быть 2 1.

Комментарии:

1. Можете ли вы отредактировать вопрос, чтобы предоставить более четкие шаги для создания проблемы и вывода, которого вы хотите достичь. Неясно, как вы создаете 7 6 5... или как бы вы «удалили 3 » из него

2. Думаю, я объяснил больше

Ответ №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;
  });
})

...
Метки: