テーブルをソートする

テーブルがあります:

Name	Surname	Age
John	Smith	10
Pete	Brown	15
Ann	Lee	5
...	...	...

そこにはもっと多くの行があるかもしれません。

"name" 列でソートするコードを書いてください。

タスクのためのサンドボックスを開く

解答は短いですが、少しトリッキーに見えるかもしれないので、ここでは詳細なコメントをします。

          let sortedRows = Array.from(table.rows)
  .slice(1)
  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);

table.tBodies[0].append(...sortedRows);
        

table.querySelectorAll('tr') のように、すべての <tr> を取得し、それらから配列を作ります。なぜなら配列メソッドが必要なためです。
最初の TR (table.rows[0]) は実際にはテーブルのヘッダです、なので `.slice(1) で残りを取ります。
最初の <td> (name フィールド) のコンテンツで比較してソートします。
.append(...sortedRows) で正しい順序でノードを挿入します。

テーブルは常に暗黙の要素を持っているので、それを取り、その中に挿入する必要があります。単純な table.append(...) は失敗します。

私たちはそれらを削除する必要がないことに留意してください。単に “再挿入” です。それらは自動的に古い場所を去ります。

サンドボックスで解答を開く