如何使用 JavaScript 按字母順序對 HTML 表格進行排序？

使用 JavaScript 對 HTML 表格進行排序

許多開發人員尋求 JavaScript 解決方案來對表格進行排序。一個簡單而有效的解決方案是按字母順序對每個列進行排序。此解決方案適合忽略程式碼、數字或貨幣並專注於文字的需求。

解決方案概述

此解決方案涉及向每個標題單元格添加單擊事件。對於相應的表，它會找到所有行（第一行除外）並根據單擊的列的值對它們進行排序。排序後，它會按照新順序將行重新插入表中。

實作詳細資訊

1. 事件處理： 新增所有儲存格的點選事件。
2. 行檢索： 從按一下的表中提取除第一行 (tr:nth-child(n 2)) 之外的所有行。
3. 排序邏輯： 建立一個排序函數比較器，它接受兩個參數：列索引 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>

此解只需按一下欄位標題即可按字母順序對HTML表格進行高效排序，無需任何外部依賴項。它的簡單性和與主要瀏覽器的兼容性使其成為滿足許多排序需求的合適選擇。

以上是如何使用 JavaScript 按字母順序對 HTML 表格進行排序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！