JavaScript を使用して HTML テーブルを並べ替える方法: 包括的なソリューション

JavaScript を使用した HTML テーブルの並べ替え: シンプルなソリューションの再考

JavaScript で適切なテーブル並べ替えソリューションを見つけるのは難しい場合があります。特定の文字を無視したり通貨を処理したりせずに、数字を含むアルファベット順に列を並べ替える必要がある場合があります。

幸いなことに、次のような簡単で効果的な JavaScript ソリューションが役立ちます。

プレーン JavaScript (ES6):

• 昇順と降順でのアルファベットと数値の両方の並べ替えをサポート
• Chrome、Firefox、Safari、さらには IE11 でも動作します

実装の詳細:

1. クリック イベント リスナーを各テーブル ヘッダー セル (th) に追加します。
2. すべてのテーブル行を取得します (最初の行を除く) ) テーブルの場合。
3. クリックした列の値に基づいて行を並べ替えます。
4. 並べ替えた行をテーブルに再挿入します。

コード スニペット:

<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));

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>

スタイル:

次の CSS を追加してテーブルのスタイルを設定し、ヘッダー セルをクリック可能にします:

<code class="css">table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}</code>

使用法:

HTML ドキュメントに JavaScript と CSS を組み込み、ヘッダー セルとデータ行を含むテーブルを追加します。

例:

<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><i>25</i></td>
</tr>
    <tr>
<td><a href="#">spain</a></td>
<td><i>2005-05-05</i></td>
<td></td>
</tr>
    <tr>
<td><b>Lebanon</b></td>
<td><a href="#">2002-02-02</a></td>
<td><b>-17</b></td>
</tr>
    <tr>
<td><i>Argentina</i></td>
<td>2005-04-04</td>
<td><a href="#">100</a></td>
</tr>
    <tr>
<td>USA</td>
<td></td>
<td>-6</td>
</tr>
</table></code>

結論:

このシンプルで効率的な JavaScript ソリューションを使用すると、データに関係なく、列ヘッダーをクリックするだけで HTML テーブルを簡単に並べ替えることができます。

と入力します。

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