隐藏或删除行后如何更新HTML表中的行索引？

Question

我有一个表，我需要删除行并用索引更新第一列。

删除功能有效，但我不知道如何更新第一列。我是否需要使用for循环？

这是我到目前为止所做的：

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属性：

.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()动态生成这些索引，这样就不必每次都使用JS更新它们。

ChildNode.remove()

CSS Counters

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