JS 实现表格列排序
2013-07-11 11:34
441 查看
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表格排序的实现</title> <style> * { font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: none; } body { text-align: center; } table { margin: 100px auto; } td { width: 110px; height: 25px; text-align: center; line-height: 25px; border: 1px solid silver; } .red { color: red; } .top { background: #EEE; cursor: pointer; } .up { background: #FFFFCC url(http://down.psd.cnhttp://p1.mb5u.com/allimg/080912/173019330.gif) no-repeat right 5px; } .down { background: #FFFFCC url(http://down.psd.cnhttp://p1.mb5u.com/allimg/080912/173019334.gif) no-repeat right 5px; } .hov { background: #F0EFE5; } </style> </head> <body> <table cellpadding="0" id="table"> <tr class="top"> <td>kick me</td> <td>kick me</td> <td>kick me</td> <td>kick me</td> </tr> <tr> <td><span id="bfn_la_bac.usa">15.43</span></td> <td class="red">700</td> <td>1.220</td> <td class="red">源</td> </tr> <tr> <td><span id="bfn_la_c.usa">7.05</span></td> <td class="red">4</td> <td>3,000</td> <td class="red">码</td> </tr> <tr> <td><span id="bfn_la_jpm.usa">30.62</span></td> <td class="red">30</td> <td>2,558,800</td> <td class="red">爱</td> </tr> <tr> <td><span id="bfn_la_axp.usa">22.30</span></td> <td class="red">5</td> <td>6</td> <td class="red">好</td> </tr> <tr> <td><span id="bfn_la_mrk.usa">26.31</span></td> <td class="red">0.6</td> <td>5</td> <td class="red">-</td> </tr> <tr> <td><span id="bfn_la_pg.usa">63.16</span></td> <td class="red">7</td> <td>4</td> <td class="red">者</td> </tr> </table> <script type="text/javascript"> var tableSort = function() { this.initialize.apply(this, arguments); } tableSort.prototype = { initialize : function(tableId, clickRow, startRow, endRow, classUp, classDown, selectClass) { this.Table = document.getElementById(tableId); this.rows = this.Table.rows;//所有行 this.Tags = this.rows[clickRow - 1].cells;//标签td this.up = classUp; this.down = classDown; this.startRow = startRow; this.selectClass = selectClass; this.endRow = (endRow == 999 ? this.rows.length : endRow); this.T2Arr = this._td2Array();//受影响的td二维数组 this.setShow(); }, //标签切换 setShow : function() { var defaultClass = this.Tags[0].className; for ( var Tag, i = 0; Tag = this.Tags[i]; i++) { Tag.index = i; addEventListener(Tag, 'click', Bind(Tag, statu)); } var _this = this; var turn = 0; function statu() { for ( var i = 0; i < _this.Tags.length; i++) { _this.Tags[i].className = defaultClass; } if (turn == 0) { addClass(this, _this.down) _this.startArray(0, this.index); turn = 1; } else { addClass(this, _this.up) _this.startArray(1, this.index); turn = 0; } } }, //选中列样式 colClassSet : function(num, cla) { //得到关联到的td for ( var i = (this.startRow - 1); i < (this.endRow); i++) { for ( var n = 0; n < this.rows[i].cells.length; n++) { removeClass(this.rows[i].cells , cla); } addClass(this.rows[i].cells[num], cla); } }, //开始排序 num 根据第几列排序 aord 逆序还是顺序 startArray : function(aord, num) { var afterSort = this.sortMethod(this.T2Arr, aord, num);//排序后的二维数组传到排序方法中去 this.array2Td(num, afterSort);//输出 }, //将受影响的行和列转换成二维数组 _td2Array : function() { var arr = []; for ( var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) { arr[l] = []; for ( var n = 0; n < this.rows[i].cells.length; n++) { arr[l].push(this.rows[i].cells .innerHTML); } } return arr; }, //根据排序后的二维数组来输出相应的行和列的 innerHTML array2Td : function(num, arr) { this.colClassSet(num, this.selectClass); for ( var i = (this.startRow - 1), l = 0; i < (this.endRow); i++, l++) { for ( var n = 0; n < this.Tags.length; n++) { this.rows[i].cells .innerHTML = arr[l] ; } } }, //传进来一个二维数组,根据二维数组的子项中的w项排序,再返回排序后的二维数组 sortMethod : function(arr, aord, w) { //var effectCol = this.getColByNum(whichCol); arr.sort(function(a, b) { x = killHTML(a[w]); y = killHTML(b[w]); x = x.replace(/,/g, ''); y = y.replace(/,/g, ''); switch (isNaN(x)) { case false: return Number(x) - Number(y); break; case true: return x.localeCompare(y); break; } }); arr = aord == 0 ? arr : arr.reverse(); return arr; } } /*-----------------------------------*/ function addEventListener(o, type, fn) { if (o.attachEvent) { o.attachEvent('on' + type, fn) } else if (o.addEventListener) { o.addEventListener(type, fn, false) } else { o['on' + type] = fn; } } function hasClass(element, className) { var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); return element.className.match(reg); } function addClass(element, className) { if (!this.hasClass(element, className)) { element.className += " " + className; } } function removeClass(element, className) { if (hasClass(element, className)) { var reg = new RegExp('(\\s|^)' + className + '(\\s|$)'); element.className = element.className.replace(reg, ' '); } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } //去掉所有的html标记 function killHTML(str) { return str.replace(/<[^>]+>/g, ""); } //------------------------------------------------ //tableid 第几行是标签行,从第几行开始排序,第几行结束排序(999表示最后) 升序标签样式,降序标签样式 选中列样式 //注意标签行的class应该是一致的 var ex1 = new tableSort('table', 1, 2, 999, 'up', 'down', 'hov'); </script> </body> </html>
相关文章推荐
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- JS实现HTML表格排序功能
- 使用Vue.js实现表格的排序和搜索功能
- js实现表格字段排序
- JS实现table表格数据排序(可支持动态数据+分页效果)
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- js实现表格排序
- JS实现表格排序
- js实现表格操作-排序
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 表格内容排序(js实现)
- JS实现计时器(prototype)+表格排序
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- jsp+js实现可排序表格
- JS实现点击表头表格自动排序(含数字、字符串、日期)
- 一个JS实现表格可排序
- jsp+js实现可排序表格
- js实现表格的添加 删除 搜索和排序
- js实现表格字段本地排序
- JS实现表格排序