[JS 最简单简洁的插件] 表格排序
来源：互联网 发布：淘宝网长袖围裙 编辑：程序博客网 时间：2024/06/06 01:56
<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title><style type="text/css">body {font-family:font-size:12px;} table{border-collapse:collapse;border-spacing:0} table th, table td{ border:1px solid #ccc; padding:6px; }</style></head><script src='http://code.jquery.com/jquery.js'></script><script>(function($){$.extend($,{tableSort:function(tableId,Idx){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]; //将表格中各行的信息存储在新建的数组中}if (tbody.sortCol == Idx) {trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列} else {//trValue.sort(compareTrs(Idx)); //进行排序trValue.sort(function(tr1, tr2){var value1 = tr1.cells[Idx].innerHTML;var value2 = tr2.cells[Idx].innerHTML;return value1.localeCompare(value2);});}var fragment = document.createDocumentFragment(); //新建一个代码片段，用于保存排序后的结果for (var i=0; i<trValue.length; i++ ) {fragment.appendChild(trValue[i]);}tbody.appendChild(fragment); //将排序的结果替换掉之前的值tbody.sortCol = Idx;}}); })(jQuery);</script><body><table id="tableSort"><thead><tr><th onclick="$.tableSort('tableSort',0)" style="cursor: pointer;">会员ID</th><th onclick="$.tableSort('tableSort',1)" style="cursor: pointer;">会员名</th><th onclick="$.tableSort('tableSort',2)" style="cursor: pointer;">邮箱</th><th onclick="$.tableSort('tableSort',3)" style="cursor: pointer;">会员组</th><th onclick="$.tableSort('tableSort',4)" style="cursor: pointer;">城市</th><th onclick="$.tableSort('tableSort',5)" style="cursor: pointer;">注册时间</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>116</td><td>wuliao</td><td>wuliao@126.com</td><td>普通会员</td><td>南昌</td><td>2011-04-01</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>jQuery</td><td>jQuery@126.com</td><td>高级会员</td><td>北京</td><td>2011-04-12</td></tr></tbody></table></body></html>
