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

首页

web前端

js教程

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

Barbara Streisand

Oct 20, 2024 pm 10:22 PM

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

PHP教程

1587

276

显示更多

Related knowledge

掌握JavaScript并发模式：网络工人与Java线程 Jul 25, 2025 am 04:31 AM

JavaScript的WebWorkers和JavaThreads在并发处理上有本质区别。1.JavaScript采用单线程模型，WebWorkers是浏览器提供的独立线程，适合执行不阻塞UI的耗时任务，但不能操作DOM；2.Java从语言层面支持真正的多线程，通过Thread类创建，适用于复杂并发逻辑和服务器端处理；3.WebWorkers使用postMessage()与主线程通信，安全隔离性强；Java线程可共享内存，需注意同步问题；4.WebWorkers更适合前端并行计算，如图像处理，而

VUE 3组成API与选项API：详细比较 Jul 25, 2025 am 03:46 AM

Vue3中CompositionAPI更适合复杂逻辑和类型推导，OptionsAPI适合简单场景和初学者；1.OptionsAPI按data、methods等选项组织代码，结构清晰但复杂组件易碎片化；2.CompositionAPI用setup集中相关逻辑，利于维护和复用；3.CompositionAPI通过composable函数实现无冲突、可参数化的逻辑复用，优于mixin；4.CompositionAPI对TypeScript支持更好，类型推导更精准；5.两者性能和打包体积无显着差异；6.

如何在JS中创建和附加元素？ Jul 25, 2025 am 03:56 AM

使用document.createElement()创建新元素；2.通过textContent、classList、setAttribute等方法自定义元素；3.使用appendChild()或更灵活的append()方法将元素添加到DOM中；4.可选地使用insertBefore()、before()等方法控制插入位置；完整流程为创建→自定义→添加，即可动态更新页面内容。

在打字稿中的高级条件类型 Aug 04, 2025 am 06:32 AM

TypeScript的高级条件类型通过TextendsU?X:Y语法实现类型间的逻辑判断，其核心能力体现在分布式条件类型、infer类型推断和复杂类型工具的构建。1.条件类型在裸类型参数上具有分布性，能自动对联合类型拆分处理，如ToArray得到string[]|number[]。2.利用分布性可构建过滤与提取工具：Exclude通过TextendsU?never:T排除类型，Extract通过TextendsU?T:never提取共性，NonNullable过滤null/undefined。3

微观前端体系结构：实施指南 Aug 02, 2025 am 08:01 AM

Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents

Jul 26, 2025 am 07:52 AM

要获取JavaScript数组的长度，可以使用内置的length属性。1.使用.length属性可返回数组中元素的数量，例如constfruits=['apple','banana','orange'];console.log(fruits.length);//输出：3；2.该属性适用于包含字符串、数字、对象或数组等任何类型数据的数组；3.length属性会自动更新，当添加或删除元素时其值随之变化；4.它返回基于零的计数，空数组的length为0；5.可手动修改length属性来截断或扩展数组，

JavaScript中的VAR，LET和CONST之间有什么区别？ Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

了解JavaScript的代理并反映API Jul 26, 2025 am 07:55 AM

Proxy和ReflectAPI是JavaScript中用于拦截和自定义对象操作的强大工具；1.Proxy通过包装目标对象并定义“陷阱”来拦截如get、set等操作，实现如日志、验证、只读控制等功能；2.Reflect提供与Proxy陷阱对应的方法，确保默认行为的一致性和正确性，提升代码可维护性；3.实际应用包括Vue3响应式系统、数据验证、调试日志、不可变对象和API模拟；4.使用时需注意性能开销、内置对象的复杂行为、this绑定问题及嵌套对象需递归代理；5.合理使用可构建高效、可调试、反应式

See all articles

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

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题