JavaScript を使用して HTML テーブルをアルファベット順に並べ替えるにはどうすればよいですか?

JavaScript を使用した HTML テーブルの並べ替え

多くの開発者は、テーブルを並べ替えるための JavaScript ソリューションを求めています。シンプルで効果的な解決策は、各列をアルファベット順に並べ替えることです。このソリューションは、コード、数値、または通貨を無視してテキストに焦点を当てる必要性に適しています。

ソリューションの概要

このソリューションには、各ヘッダー セルにクリック イベントを追加することが含まれます。 。それぞれのテーブルについて、最初の行を除くすべての行を検索し、クリックされた列の値に基づいて並べ替えます。並べ替えると、行が新しい順序でテーブルに再挿入されます。

実装の詳細

1. イベント処理: 追加すべてのセルへのクリック イベント。
2. 行取得: クリックされたテーブルから最初の行 (tr:nth-child(n 2)) を除くすべての行を抽出します。
3. 並べ替えロジック: 2 つの引数 (列インデックス idx と asc フラグ) を取る並べ替え関数比較子を作成します。この関数は、クリックされた列のテキスト コンテンツに基づいて行を並べ替えます。
4. テーブルの更新: 行を並べ替えた後、新しい順序でテーブルに追加し直します。

JavaScript と HTML のコード例

<code class="javascript">const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// Event Handling
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) );
})));</code>

<code class="html"><table>
    <tr>
<th>Country</th>
<th>Date</th>
<th>Size</th>
</tr>
    <tr>
<td>France</td>
<td>2001-01-01</td>
<td>25</td>
</tr>
    <tr>
<td>spain</td>
<td>2005-05-05</td>
<td></td>
</tr>
    <tr>
<td>Lebanon</td>
<td>2002-02-02</td>
<td>-17</td>
</tr>
    <tr>
<td>Argentina</td>
<td>2005-04-04</td>
<td>100</td>
</tr>
    <tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</table></code>

このソリューションは、外部依存関係を持たずに、列ヘッダーを 1 回クリックするだけで HTML テーブルをアルファベット順に効率的に並べ替えます。そのシンプルさと主要なブラウザとの互換性により、多くの並べ替えニーズに適したオプションとなっています。

以上がJavaScript を使用して HTML テーブルをアルファベット順に並べ替えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。