對表格進行排序
重要性：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)逐步演算法
- 從
<tbody>取得所有<tr>。 - 然後依據第一個
<td>（名稱欄位）的內容進行比較，並對其進行排序。 - 現在按順序透過
.append(...sortedRows)插入節點。
我們不必移除列元素，只需「重新插入」，它們會自動離開舊位置。
P.S. 在我們的案例中，表格中有一個明確的 <tbody>，但即使 HTML 表格沒有 <tbody>，DOM 結構中也始終會有它。