テーブルをソート
importance: 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>(name フィールド) の内容で比較してソートします。 - ソートされた行を
.append(...sortedRows)で正しい順序でノードを挿入します。
行要素を削除する必要はなく、「再挿入」するだけで、古い場所は自動的に残ります。
追伸：ここではテーブルに明示的な <tbody> がありますが、HTML テーブルに <tbody> がなくても、DOM 構造には常に <tbody> があります。