隱藏或刪除行后，如何更新 HTML 表中的行索引？

Question

我有一個表，我需要刪除行並使用索引更新第一列。

刪除 function 有效，但我不知道如何更新第一列。 我需要使用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屬性：

 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>