JavaScript を使用して HTML テーブルを列の値で並べ替える方法

JavaScript を使用した HTML テーブルの並べ替え: 総合ガイド

テーブルの並べ替えは、Web 開発における一般的な要件です。この記事では、HTML テーブルの各列をアルファベット順 (昇順と降順) で並べ替えることができる、シンプルで効果的な JavaScript ソリューションについて説明します。

問題ステートメント:

このタスクは、指定された HTML テーブルを各列の値で A から Z、Z から A に並べ替えることができる JavaScript ソリューションを開発することです。このソリューションはコードや数値を無視してはならず、通貨を使用してはなりません。

解決策:

提供された JavaScript コードは、並べ替えの問題に対する解決策を提供します。プレーン JavaScript (ES6) を採用し、昇順と降順の両方でアルファベット順と数値順の並べ替えをサポートします。

実装の詳細:

1. 追加ヘッダー セルへのクリック イベント: 各ヘッダー セル (th) にはクリック イベント リスナーが装備されています。
2. テーブル行の取得: 現在のテーブルの最初の行を除くすべての行
3. 列の値に基づいて行を並べ替えます: 取得された行は、値が数値かどうかを確認してそれに応じて並べ替える比較関数を使用して並べ替えられます。ロケールを認識した文字列比較。
4. テーブル内の行を並べ替えます: 並べ替えられた行は、計算された順序で HTML テーブルに再挿入されます。

使用法:

このソリューションを実装するには、HTML ドキュメントに JavaScript コード スニペットを組み込み、CSS を使用してテーブルとヘッダー セルのスタイルを設定します。ヘッダー セルをクリックすると、対応する列が並べ替えられます。

結論:

提供される JavaScript ソリューションは、HTML テーブルを列の値で並べ替える堅牢かつカスタマイズ可能な方法を提供します。アルファベット順と数値順の両方の並べ替えをサポートし、さまざまなデータ型をシームレスに処理します。簡潔で効率的なコードは、HTML テーブルの機能を強化する実用的なアプローチを提供します。

以上がJavaScript を使用して HTML テーブルを列の値で並べ替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。