JavaScript ソート HTML テーブル
テーブルをインタラクティブにしたい状況に出くわすことがよくあります。列をクリックするか、その他の方法で並べ替えることができます。HTML にはプログラミング機能がないため、JavaScript を使用して HTML テーブルを並べ替える必要があります。残念ながら、配列の並べ替えに役立つ組み込みのメソッドはありません。したがって、DOM 操作機能と比較関数を活用するカスタムメソッドを作成します。このチュートリアルでは、JavaScript を使用して HTML テーブルを並べ替える方法を説明します。
JavaScript を使用して HTML テーブルを並べ替える
ユーザー定義メソッドは、次の 2つのヘルパー関数を使用して配列を並べ替えます。
getCellValue()
テーブルの行と列のインデックスを指定してセルからコンテンツを取得する関数。
テーブル行の children プロパティを使用して、tr.children[i] を使用して ith 列を選択し、次にその innerText または textContent プロパティを使用して、実際のコンテンツを保存します。セル内の実際のコンテンツを取得したら、カスタム比較ツールを使用してこれらの値を比較および並べ替えることができます。
comparer()
特定のテーブル内の 2つの要素の値を比較する関数。
最初に、指定された行と列のインデックスを持つ getCellValue() 関数を使用してセルのコンテンツを取得します。次に、両方が有効な整数または文字列であることを確認し、それらを比較して正しい順序を見つけます。
アルゴリズム
-
イベントリスナーを追加して、テーブル内のすべてのヘッダーをクリック可能にします。
-
最初の行を除く、選択した列のすべての行を検索します。
-
JavaScript の
sort()関数をcomparer()とともに使用して、要素を並べ替えます。 -
並べ替えられた行をテーブルに挿入し直して、最終的な並べ替えられたテーブルを出力として取得します。
コード
const getCellValue = (tableRow, columnIndex) =>
tableRow.children[columnIndex].innerText ||
tableRow.children[columnIndex].textContent;
const comparer = (idx, asc) => (r1, r2) =>
((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
el1 - el2 :
el1.toString().localeCompare(el2))(
getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));
// do the work...
document.querySelectorAll('th').forEach(
th => th.addEventListener(
'click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(
Array.from(th.parentNode.children).indexOf(th),
this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
})));
すべての主要なブラウザは、上記のすべての方法をサポートしています。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn