隐藏或删除行后如何更新 HTML 表中的行索引？
Posted
技术标签:
【中文标题】隐藏或删除行后如何更新 HTML 表中的行索引？【英文标题】：How can I update row indexes in an HTML table after hiding or deleting rows? 【发布时间】：2020-08-23 07:32:44 【问题描述】：我有一个表，我需要删除行并使用索引更新第一列。
删除功能有效，但我不知道如何更新第一列。我需要使用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"></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"></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"></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"></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"></i></td>
<td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>【问题讨论】：
这似乎可以使用css来实现。这个 *** 项目中有几个有趣的选项可以帮助您：***.com/questions/48161460/… 【参考方案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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></i></td>
<td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>【讨论】：
以上是关于隐藏或删除行后如何更新 HTML 表中的行索引？的主要内容，如果未能解决你的问题，请参考以下文章
删除 TableView 中的行后如何更新 indexPath？