javascript - 隐藏或删除行后如何更新 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>

标签： javascripthtmlcssdomhtml-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 Counters动态生成这些索引，这样您就不需要每次都用 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>