对表格进行排序
重要性：5
有一个表格
<table>
<thead>
<tr>
<th>Name</th><th>Surname</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td><td>Smith</td><td>10</td>
</tr>
<tr>
<td>Pete</td><td>Brown</td><td>15</td>
</tr>
<tr>
<td>Ann</td><td>Lee</td><td>5</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</tbody>
</table>它可能包含更多行。
编写代码，按“name”列对表格进行排序。
解决方案很短，但可能看起来有点棘手，所以这里我提供了带有详细注释的解决方案。
let sortedRows = Array.from(table.tBodies[0].rows) // 1
.sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));
table.tBodies[0].append(...sortedRows); // (3)逐步算法
- 获取所有
<tr>，从<tbody>中。 - 然后根据第一个
<td>（名称字段）的内容对它们进行排序。 - 现在通过
.append(...sortedRows)按正确顺序插入节点。
我们不需要删除行元素，只需“重新插入”，它们会自动离开旧位置。
附注：在我们的案例中，表格中有一个显式的 <tbody>，但即使 HTML 表格没有 <tbody>，DOM 结构始终包含它。