如何使用 JavaScript 對 HTML 表格進行排序：綜合解決方案

使用JavaScript 對HTML 表格進行排序：重新審視簡單的解決方案

在JavaScript 中找到合適的表格排序解決方案可能是一項挑戰。您可能需要按字母順序對列（包括數字）進行排序，但不能忽略特定字元或處理貨幣。

幸運的是，有一個簡單有效的JavaScript 解決方案可以提供幫助：

純JavaScript (ES6):

• 支援字母和數字升序和降序排序
• 適用於Chrome、Firefox、Safari，甚至IE11

實現細節：

1. 為每個表格標題儲存格新增點擊事件監聽器。
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>

樣式：

用法：

<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中文網其他相關文章！