让表格按照日期、字符串、数值巨细举办排序

发布时间：2018-08-14 17:59:13 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys