本文共 3423 字，大约阅读时间需要 11 分钟。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title>test</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:'微软雅黑'; 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值 } } }//对表格进行排序
function sortTable(tableId, col) { var table = document.getElementById(tableId); var tbody = table.tBodies[0]; var tr = tbody.rows; var trValue = new Array(); var ux = []; for (var i=0; i<tr.length; i++ ) { trValue[i] = tr[i]; //将表格中各行的信息存储在新建的数组中 } if (tbody.sortCol == col) { trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列 } else { for (var i=0; i<trValue.length; i++){ var tmp = {}; tmp.dom = trValue[i]; tmp.date = new Date(trValue[i].cells[5].firstChild.data.replace(/-/g,'/')); ux.push(tmp); } ux.sort(function(a,b){ return a.date - b.date; }); for (var i=0; i<trValue.length; i++ ) { trValue[i]=ux[i].dom; //fragment.appendChild(trValue[i]); } } var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果 for (var i=0; i<trValue.length; i++ ) { //trValue[i]=ux[i].dom; fragment.appendChild(trValue[i]); } tbody.appendChild(fragment); //将排序的结果替换掉之前的值 tbody.sortCol = col;//document.write(tbody.sortCol); } 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>会员组</th> <th>城市</th> <th οnclick="sortTable('tableSort', 5)" style="cursor: pointer;">注册时间</th>//红色字是用来变小手的 </tr> </thead> <tbody> <tr> <td>126</td> <td>alixixi.com</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>2013-12-06</td> </tr> <tr> <td>116</td> <td>wuliao</td> <td>wuliao@126.com</td> <td>普通会员</td> <td>南昌</td> <td>2012-12-06</td> </tr> <tr> <td>129</td> <td>tired</td> <td>tired@126.com</td> <td>中级会员</td> <td>北京</td> <td>2011-04-06</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> <tr> <td>132</td> <td>alixixi.cn</td> <td>jQuery@126.com</td> <td>高级会员</td> <td>北京</td> <td>2011-04-12</td> </tr> </tbody> </table> </div> </body> </html>//时间中一个NULL或者没有NULL都可以，一旦有两个或更多NULL就会出错。。。求解！！！！
转载地址：http://vwafb.baihongyu.com/