JavaScript实现表格的排序
2015-08-06 16:32
489 查看
利用JS实现表格排序,依赖于JS数组中Array对象的sort方法
首先介绍一下sort()方法:
1.定义和用法:
sort()方法用于对数组元素的排序
2.语法:
arrayObject.sort(sortRule);
3.参数:
sortRule :可选。规定排序顺序。必须是函数。
4.返回值:
对数组的引用。数组在原数组上进行排序,不生成副本。
5.说明:
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,也就是按字符编码顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如果有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,其返回值如下:
若a<b,则排序后的数组中的a应该出现在b之前,则返回一个小于0的值
若a=b,则返回0
若a>b,则返回一个大于0的值
Example 1:
创建一个数组,并字母顺序进行排序:
输出结果:
Example 2:
创建一个数组,并按字母顺序排序,需要实现排序函数:
输出结果:
下面是对一个表格实现的排序:
(完全可以运行)
首先介绍一下sort()方法:
1.定义和用法:
sort()方法用于对数组元素的排序
2.语法:
arrayObject.sort(sortRule);
3.参数:
sortRule :可选。规定排序顺序。必须是函数。
4.返回值:
对数组的引用。数组在原数组上进行排序,不生成副本。
5.说明:
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,也就是按字符编码顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如果有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,其返回值如下:
若a<b,则排序后的数组中的a应该出现在b之前,则返回一个小于0的值
若a=b,则返回0
若a>b,则返回一个大于0的值
Example 1:
创建一个数组,并字母顺序进行排序:
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") document.write(arr.sort()) </script>
输出结果:
Adrew,George,James,John,Martin,Thomas
Example 2:
创建一个数组,并按字母顺序排序,需要实现排序函数:
<script type="text/javascript"> function sortNumber(a,b) { return a - b } var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>
输出结果:
1,5,10,25,40,1000
下面是对一个表格实现的排序:
(完全可以运行)
<html> <head> <title>Super Link</title> <script laguage="javascript"> function generateCompare(iCol){ return function compare(tr1,tr2){ var v1=tr1.cells[iCol].firstChild.nodeValue; var v2=tr2.cells[iCol].firstChild.nodeValue; if(iCol==0){ //序号列,降序 if(parseInt(v1)>parseInt(v2)) return -1; else if(parseInt(v1)<parseInt(v2)) return 1; else return 0; }else{ //姓名列,升序 if(v1>v2) return 1; else if(v1<v2) return -1; else return 0; } } } function sortTable(iCol){ var oTable=document.getElementById("tblSort"); var oBody=oTable.tBodies[0]; var aRows=oBody.rows; var a=new Array; for(var i=0;i<aRows.length;i++){ a.push(aRows[i]); } a.sort(generateCompare(iCol)); var ofrag=document.createDocumentFragment(); for(var i=0;i<a.length;i++){ ofrag.appendChild(a[i]); } oBody.appendChild(ofrag); } </script> </head> <body> <input type="button" value="按序号降序排列" onclick="sortTable(0)"> <br> <br> <input type="button" value="按姓名升序排列" onclick="sortTable(1)"> <br> <br> <table border="1" id="tblSort"> <thead> <tr> <th>序号</th> <th>姓名</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>王明</td> </tr> <tr> <td>12</td> <td>超人</td> </tr> <tr> <td>3</td> <td>张三</td> </tr> <tr> <td>4</td> <td>李四</td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- js获取单选框的值
- JS实现三级折叠菜单特效,其它级可自动收缩
- javascript 变量 命名规范 变量的作用域
- js获取GET数据
- js获取当前时间
- js定义trim函数
- js添加删除元素
- js 判断手机号
- HTML CANVAS javascript 生成迷宫/游戏
- jstree静态生成树并为树添加触发事件
- JavaScript实现定时隐藏与显示图片的方法
- js运算符|| &&
- 【连载】实用小demo连载 3 —— js 时间转换 demo
- 【连载】实用小demo连载 3 —— js 时间转换 demo 2015-08-06 16:10 1人阅读 评论(0) 收藏
- JointJS
- JS页面加载的几种方式
- 【Jsoup网页解析】
- 原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y
- JS Math函数
- js 监听监键盘动作