JavaScript实现高级表格排序教程

需积分: 9 75 浏览量更新于2024-12-13 收藏 31KB DOC 举报

"这篇教程介绍了如何使用JavaScript实现高级表格排序的功能，无需修改源码，只需复制并正确引用到HTML文件中。表格需设置ID，并在thead的th元素中添加特定的onclick事件处理函数，用于触发排序。排序方式可根据数据类型（如字母、数字、日期）进行调整。" 在JavaScript中，实现表格排序是一项常见的需求，尤其在数据展示和管理的场景中。本教程主要讲解了一种高级的JS表格排序方法，允许用户通过点击表头来改变表格数据的顺序。首先，你需要将提供的JS代码复制到HTML文件的<head>区域，或者将其保存为独立的.js文件并链接引入。关键步骤如下： 1. **设置表格ID**：为了能够识别并操作需要排序的表格，需要为每个表格设置唯一的ID。例如，ID为"tb_1"的表格可以通过`<table id="tb_1">`来定义。 2. **添加表头事件**：在表格的thead部分，为每个th元素添加`onclick`事件处理函数，以及`cursor:pointer`样式，使得用户可以感知到可点击性。例如，`<th onclick="sortTable('tb_1',0)">`表示点击此th时对第0列进行排序。根据数据类型，可以传递额外的参数如'int'（整数）、'float'（浮点数）或'date'（日期）。 3. **处理排序逻辑**：排序逻辑主要在`sortTable`函数中实现。该函数通过DOM操作获取表格的所有行，将它们存储到数组中，然后利用JavaScript的`Array.sort()`方法对数组进行排序。为了提高性能，不直接操作DOM，而是使用文档碎片（DocumentFragment）来存放排序后的行，最后一次性将它们插入到tbody中。这种方法避免了频繁的DOM操作，提高了页面性能。 4. **自定义排序规则**：`Array.sort()`方法可以接受一个比较函数作为参数，根据这个函数的返回值决定元素的相对顺序。在排序整数、浮点数、日期等不同类型的列时，需要编写相应的比较函数，以确保正确的排序顺序。例如，对于整数列的排序，你可以这样定义比较函数： ```javascript function compareNumbers(a, b) { return parseInt(a) - parseInt(b); } ``` 然后在`sortTable`函数中使用`Array.sort(compareNumbers)`。 5. **处理非文本内容**：对于如图片这样的非文本内容排序，可以在图片前添加一个隐藏的div，其内容为需要排序的文字。通过隐藏div的内容进行排序，而不是直接基于图片本身。总结来说，这个教程提供了一种高效且灵活的JavaScript表格排序解决方案，通过简单的配置和JavaScript基础，就可以实现功能丰富的表格排序功能。无论是在学习JavaScript DOM操作，还是在实际项目开发中，都是一份值得参考的资源。



使用方法：

源码无需任何修改，直接复制即可，建议放在  区，最好单独存一个  文

件然后在  区引用进来。

然后为每个要排序的表格设置一个 ，比如此例中的 。记得这个  需

要  和  元素，否则  节点解析会出错。 里放一行标题，

建议用 ，然后为每个  加入以下属性：  !"#$"

%&，第 ' 个  是为了让鼠标指上去发生变化（变成

手指），第  个是点击事件。

其中  即是这个  的 ()，紧随的#符号是列号，第  个  就用 ，第 '

个用 **以此类推。默认的这种属性是按字母排列的，如果这列是整数排列

的话请加入第  个参数  ，就像这样：  !"#!"

 $"%&，如果带有小数请用参数 + ，如果是日期

请用  。

另外不是以上类型的比较时——比如图片排序——请在每个图片前加入隐藏

, 域，例子请看本例，隐藏 , 的方法是将它设置 &即可。这

样图片便按照隐藏 , 域里的文字内容排序。

想研究代码的人读下思想：

基本注释都很完善了。设置  的目的就是为了在点击标题发生事件时传入这个

 的  参数，在  里获取这个  从而找到这个  的  节点，然后

通过相应节点访问方法把每行  的指针存入一个数组，对数组进行排序。值得

注意的是排完顺序的数组不是直接把  指针写入文件，这样会大大增加开销；

而是创建了一个文档碎片放入排好顺序的内容后在  到  上。注意

这里数组存的是  节点，由于节点都是指针引用，因此可以直接附上而无需先

删除原有  再增加了。

还值得一说的就是数组的  方法，它接受一个函数参数，用这个可以指定排

序方法。这个参数很神奇，我也是第一次看到这种方式的调用，好用且古怪的

感觉……

-".."/"/"

/"0

-0

111"-0

1111"-"23"  !"$"

%&0代码-0

1111"-"  !"$"%&"0

图-0

1111"-"43"  !"'$"

%&0英文名-0

1111"-"43"  !"$"

%&0日文名-0

1111"-"/"  !"5$"

%&0作用-0

下载后可阅读完整内容，剩余3页未读，立即下载

jlw_999

粉丝: 3
资源: 3

JavaScript实现高级表格排序教程

易语言超级列表框排序功能

易语言高级表格操作源码

易语言超级列表框点击表头进行排序的代码

jQuery html表格排序插件tablesorter使用方法详解

jquery.tableSort.js表格排序插件使用方法详解

JavaScript高级程序设计 阅读笔记（十九） js表格排序

表格排序

js控制点击表格排序和表头浮动

表格排序插件

jquery tablesorter.js 支持中文表格排序改进

最新资源

JavaScript高级程序设计阅读笔记（十九） js表格排序