JavaScript学习笔记(1)——一个表格排序的例子
来源:互联网 发布:js取1到10随机数 编辑:程序博客网 时间:2024/05/20 19:28
在Web程序中,当用户要求为取得的数据表单作排序后再输出时,我们的一个解决方案可以是向数据库发送请求要求其返回经过排序后的数据,但这样做无疑占用了较多的资源。于是我们利用JavaScript语句中Array类的sort方法来在客户端对数据进行排序。
设有如下一个表格:
<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>
然后让我们给出一个比较函数,它的原理和作用会在接下来的排序函数中说明:
function generateCompareTRs(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 oTBody=oTable.tBodies[0];//得到<tbody>标签对象 var aRows=oTBody.rows;//得到表格体的行对象 var aTRs=new Array;//创建一个Array对象用于保存读入的行并对其进行排序 for(var i=0;i<aRows.length;i++)//循环将行对象压入刚刚创建的Array对象中 { aTRs.push(aRows[i]); } aTRs.sort(generateCompareTRs(iCol)); /* 利用Array对象的sort()方法对行中的对象进行排序 sort()方法可以不带有参数值,当不带参数值时,sort()方法会将数组中的数据按字符串排序规则进行排序 当带参数值时,参数值为一比较函数, 该函数必须返回下列值之一: 如果所传递的第一个参数小于第二个参数,则返回负值。 如果两个参数相等,则返回零。 如果第一个参数大于第二个参数,则返回正值。 */ var oFragment=document.createDocumentFragment();//创建一个文档碎片对象 for(var i=0;i<aTRs.length;i++)//循环将排序之后的行对象依次加入到文档碎片中 { oFragment.appendChild(aTRs[i]); }; oTBody.appendChild(oFragment); //一次过将文档碎片中的行对象通过文档碎片输出到表格体当中,比起循环依次将行对象输出到表格体,这么做的话运行效率会显著提升 }
这里的一个关键知识点就是JavaScript中Array对象sort方法的使用,如果看过上面代码中的注释之后还不清楚的,可以参考这里:
sort 方法 (Array) (JavaScript)
最后,再在JSP页面<body>标签中加上两个按钮:
<input type="button" onclick="sortTable(0)" value="按序号降序排序"/> <input type="button" onclick="sortTable(1)" value="按姓名升序排序"/>
我们这次的任务就大致完成了,要想实现按序号升序排序和按姓名降序排序的功能,只要修改相应代码即可。
至此我还有两个疑问:
1.在比较函数generateCompareTRs()中注释打问号的部分我尚不理解
2.Array.sort()在对字符串进行排序时,所依据的规则是什么?(已解决,依据的是字符所对应的ASCII值的大小)
0 0
- JavaScript学习笔记(1)——一个表格排序的例子
- javascript学习笔记—表格的动态添加、删除,表格排序
- 对表格操作的一个javascript例子
- JavaScript学习笔记9--表格排序
- JavaScript学习笔记9--表格排序
- javascript 学习笔记之表格排序
- JavaScript学习笔记8--一个文字自动匹配的例子
- JavaScript学习笔记8--一个文字自动匹配的例子
- 表格排序——javascript
- 一个自由编辑表格的小例子(javascript)
- 《JavaScript高级程序设计》学习笔记(表格排序)
- 《JavaScript学习笔记》:表格的应用
- extjs工作笔记1---属性表格去掉排序功能++很好的extjs例子网站
- Spring 学习笔记(1)—— 通过一个小例子体会 IoC 的概念
- html 一个表格的例子
- ZKoss表格的一个例子
- javascript写的表格排序
- JavaScript实现表格的排序
- OC沙盒桌面读取写入
- 九度OJ 时钟
- Opencv研读笔记:haartraining程序之莫名其妙的条件宏ICV_DEF_FIND_STUMP_THRESHOLD_SQ解释~
- 病毒软件,导致DNS失效的解决办法
- 各种排序
- JavaScript学习笔记(1)——一个表格排序的例子
- 30岁程序员回顾人生、展望未来
- 如何避免进入不适合自己的开源社区
- 《更好的解釋(數學篇)》——EX001:理解复数的乘法是怎样实现的
- 常用正则表达式
- 《数据结构》实验五: 树和二叉树实验
- CUDA图像旋转的实现
- [LeetCode]Linked List Cycle
- 距离传感器