Как я могу обновить индексы строк в таблице HTML после скрытия или удаления строк?

Question

У меня есть таблица, и мне нужно удалить строки и обновить первый столбец индексом.

Функция удаления работает, но я не знаю, как обновить первый столбец. Нужно ли мне использовать for l oop?

Вот что я сделал до сих пор:

const deleteButtons = document.querySelectorAll('.delete');

for (i = 0; i < deleteButtons.length; i++) {
  deleteButtons[i].addEventListener('click', ({ currentTarget }) => {
    currentTarget.parentElement.parentElement.style.display = 'none';
  });
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>

Answer 1

Вам просто нужно перебрать все строки и обновить свойство .textContent их первой ячейки:

Array.from(document.querySelectorAll('.delete')).forEach((delBtn) => {
  delBtn.addEventListener('click', ({ currentTarget }) => {
    const tr = currentTarget.parentElement.parentElement;
    const tbody = tr.parentElement;
    
    // Hide this element:
    tr.setAttribute('hidden', true);
    
    // Update all indexes:
    let nextIndex = 0;
    
    Array.from(tbody.children).forEach((row) => {
      if (!row.hasAttribute('hidden')) {
        // Only increment the counter for those that are not hidden;
        row.children[0].textContent = ++nextIndex;
      }
    });
  });
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>

В качестве альтернативы, если вы действительно удаляете строку, а не скрываете ее, используя ChildNode.remove(), вы можете использовать CSS Счетчики для динамического создания этих индексов, чтобы вам не приходилось обновлять их каждый раз с помощью JS:

Array.from(document.querySelectorAll('.delete')).forEach((delBtn) => {
  delBtn.addEventListener('click', ({ currentTarget }) => {
    currentTarget.parentElement.parentElement.remove();
  });
});

.table {
  counter-reset: index;
}

.indexCell::before {
  counter-increment: index;
  content: counter(index);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Duration</th>
      <th scope="col">Play</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Didn't love</td>
      <td>4:18</td>
      <td><i style="font-size:24px" class="fa love">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>                           </td>
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Keys</td>
      <td>3:51</td>
      <td><i style="font-size:24px" class="fa keys">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Smoking</td>
      <td>5:12</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Foo</td>
      <td>9:10</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
    <tr>
      <th scope="row" class="indexCell"></th>
      <td>Bar</td>
      <td>10:45</td>
      <td><i style="font-size:24px" class="fa smoking">&#xf144;</i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td> 
    </tr>
  </tbody>
</table>