如何使用 JavaScript 对 HTML 表格进行排序：综合解决方案-js教程-PHP中文网

如何使用 JavaScript 对 HTML 表格进行排序：综合解决方案

Barbara Streisand

发布： 2024-10-20 22:22:02

原创

106 人浏览过

How to Sort HTML Tables with JavaScript: A Comprehensive Solution

使用 JavaScript 对 HTML 表格进行排序：重新审视简单的解决方案

在 JavaScript 中找到合适的表格排序解决方案可能是一项挑战。您可能需要按字母顺序对列（包括数字）进行排序，但不能忽略特定字符或处理货币。

幸运的是，有一个简单有效的 JavaScript 解决方案可以提供帮助：

纯 JavaScript (ES6):

支持字母和数字升序和降序排序
适用于 Chrome、Firefox、Safari，甚至 IE11

实现细节：

为每个表格标题单元格添加一个点击事件监听器。
检索所有表格行（除了第一个行） ) 对于表。
根据单击的列的值对行进行排序。
将排序后的行重新插入表中。

代码片段：

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

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' &amp;&amp; v2 !== '' &amp;&amp; !isNaN(v1) &amp;&amp; !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中文网其他相关文章！