如何使用 JavaScript 按字母顺序对 HTML 表格进行排序？-js教程-PHP中文网

如何使用 JavaScript 按字母顺序对 HTML 表格进行排序？

Linda Hamilton

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

原创

181 人浏览过

How to Sort HTML Tables Alphabetically with JavaScript?

使用 JavaScript 对 HTML 表格进行排序

许多开发人员寻求 JavaScript 解决方案来对表格进行排序。一个简单而有效的解决方案是按字母顺序对每列进行排序。此解决方案适合忽略代码、数字或货币并专注于文本的需求。

解决方案概述

此解决方案涉及向每个标题单元格添加单击事件。对于相应的表，它会找到所有行（第一行除外）并根据单击的列的值对它们进行排序。排序后，它会按照新顺序将行重新插入表中。

实现详细信息

事件处理： 添加所有单元格的单击事件。
行检索： 从单击的表中提取除第一行 (tr:nth-child(n 2)) 之外的所有行。
排序逻辑： 创建一个排序函数比较器，它接受两个参数：列索引 idx 和 asc 标志。此函数根据单击列的文本内容对行进行排序。
表更新：对行进行排序后，将它们按新顺序追加回表中。

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中文网其他相关文章！