让表格根据日期、字符串、数值大小进行排序

发布时间：2018-08-15 19:19:43 所属栏目：PHP教程来源：站长网

导读：Java Script表格排序，让表格根据日期、字符串、数值大小进行排序，在本代码中，点击会员组即可对表格数据进行排序了。实现中牵扯一些动态属性的添加、删除等，对JS熟悉的朋友可能容易理解些。演示代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Tra

　　JavaScript表格排序，让表格根据日期、字符串、数值大小进行排序，在本代码中，点击“会员组”即可对表格数据进行排序了。实现中牵扯一些动态属性的添加、删除等，对JS熟悉的朋友可能容易理解些。

　　演示代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>表格排序、分类</title> <style type="text/css"> * { padding:0; margin:0; } body { font-family:verdana; font-size:12px; } .content { width:550px; margin:20px auto; } .content h1 { font-family:'<b>微软雅黑</b>'; font-size:18px; padding-bottom:5px; } table { width:100%; } th, td { padding:6px 0; text-align:center; } th { background-color:#007D28; color:#ffffff; } tr { background-color:#E8FFE8; } .odd { background-color:#FFF3EE; } .highlight { background-color:#FFF3EE; } </style> <script type="text/javascript"> //动态给js添加class属性 function addClass(element, value) { if(!element.className) { element.className = value; //如果element本身不存在class,则直接添加class为value的值 } else { element.className += " "+value; //如果element之前有一个class值，注意中间要多一个空格,然后再加上value的值 } } //鼠标经过时高亮显示 function highlightRows() { var rows = document.getElementsByTagName("tr"); for(var i=0; i<rows.length; i++) { rows[i].oldClassName = rows[i].className; //首先保存之前的class值 rows[i].onmouseover = function() { addClass(this, "highlight"); //鼠标经过时添加class为highlight的值 } rows[i].onmouseout = function() { this.className = this.oldClassName; //鼠标离开时还原之前的class值 } } } //用于sort排序的比较函数 function compareTrs(tr1, tr2) { var value1 = tr1.cells[3].innerHTML; var value2 = tr2.cells[3].innerHTML; //var value1 = tr1.cells[3].firstChild.nodeValue; //两种方式都可以表格中单元格的值 //var value2 = tr2.cells[3].firstChild.nodeValue; return value1.localeCompare(value2); } //对表格进行排序 function sortTable(tableId) { var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue = new Array(); for (var i=0; i<tr.length; i++ ) { trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中 } trValue.sort(compareTrs); //进行排序 var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果 for (var i=0; i<trValue.length; i++ ) { fragment.appendChild(trValue[i]); } tbody.appendChild(fragment); //将排序的结果替换掉之前的值 } window.onload = function() { highlightRows(); } </script> </head> <body> <div class="content"> <h1>会员信息表(点击表格标题可进行排序)</h1> <table summary="user infomation table" id="tableSort"> <thead> <tr> <th>会员ID</th> <th>会员名</th> <th>邮箱</th> <th onclick="sortTable('tableSort')" style="cursor: pointer;">会员组</th> <th>城市</th> <th>注册时间</th> </tr> </thead> <tbody> <tr> <td>126</td> <td>webw3c</td> <td>este@126.com</td> <td>普通会员</td> <td>北京</td> <td>2011-04-13</td> </tr> <tr> <td>145</td> <td>test001</td> <td>test001@126.com</td> <td>中级会员</td> <td>合肥</td> <td>2011-03-27</td> </tr> <tr> <td>155</td> <td>tiredso</td> <td>tireds0@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-06</td> </tr> <tr> <td>131</td> <td>javascript</td> <td>js2011@126.com</td> <td>中级会员</td> <td>武汉</td> <td>2011-04-08</td> </tr> </tbody> </table> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：保山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

接续CKEditor怎样上传	如何使你的站跟新浪的
解析PHP上传自动生成缩	浅析php生成静态页面的