JavaScript控制网页内表格TABLE排序

http://www.corange.cn//uploadfiles/20100418-4_31005.png

代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5 <title>JavaScript控制网页内表格排序</title>
  6 <style>
  7 *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;}
  8 body{text-align:center;}
  9 table{margin:100px auto;}
10 td{width:100px;height:24px;text-align:center;line-height:24px;border:1px solid silver;}
11 .red{color:red;}
12 .top{background:#CCCCCC;cursor:pointer;}
13 .up{background:#FFFFCC url(up.gif) no-repeat right 5px;}
14 .down{background:#FFFFCC url(down.gif) no-repeat right 5px;}
15 .hov{background:#F0EFE5;}
16 </style>
17 </head>
18 <body>
19 <table cellpadding="0" id="table">
20 <tr class="top"><td>点击排序</td><td >点击排序</td><td>点击排序</td><td>点击排序</td></tr>
21 <tr>
22 <td><span id="bfn_la_bac.usa">15.43</span></td>
23 <td class="red">700</td>
24 <td>1.220</td>
25 <td class="red">www.corange.cn</td>
26 </tr>
27 <tr><td><span id="bfn_la_c.usa">7.05</span></td>
28 <td class="red">4</td>
29 <td>3,000</td>
30 <td class="red">asp</td>
31 </tr>
32 <tr><td><span id="bfn_la_jpm.usa">30.62</span></td>
33 <td class="red">30</td>
34 <td>2,558,800</td>
35 <td class="red">php</td>
36 </tr>
37 <tr>
38 <td><span id="bfn_la_axp.usa">22.30</span></td>
39 <td class="red">5</td><td>6</td>
40 <td class="red">js</td>
41 </tr>
42 <tr><td><span id="bfn_la_mrk.usa">26.31</span></td>
43 <td class="red">0.6</td><td>5</td>
44 <td class="red">网站开发</td>
45 </tr>
46 <tr><td><span id="bfn_la_pg.usa">63.16</span></td>
47 <td class="red">7</td><td>4</td>
48 <td class="red">子</td>
49 </tr>
50 </table>
51 <script type="text/javascript">
52
53 var tableSort = function(){
54 this.initialize.apply(this,arguments);
55 }
56
57 tableSort.prototype = {
58
59 initialize : function(tableId,clickRow,startRow,endRow,classUp,classDown,selectClass){
60 this.Table = document.getElementById(tableId);
61 this.rows = this.Table.rows;//所有行
62 this.Tags = this.rows[clickRow-1].cells;//标签td
63 this.up = classUp;
64 this.down = classDown;
65 this.startRow = startRow;
66 this.selectClass = selectClass;
67 this.endRow = (endRow == 999? this.rows.length : endRow);
68 this.T2Arr = this._td2Array();//所有受影响的td的二维数组
69 this.setShow();
70 },
71 //设置标签切换
72 setShow:function(){
73 var defaultClass = this.Tags[0].className;
74 for(var Tag ,i=0;Tag = this.Tags[i];i++){
75 Tag.index = i;
76 addEventListener(Tag ,'click', Bind(Tag,statu));
77 }
78 var _this =this;
79 var turn = 0;
80 function statu(){
81 for(var i=0;i<_this.Tags.length;i++){
82 _this.Tags[i].className = defaultClass;
83 }
84 if(turn==0){
85 addClass(this,_this.down)
86 _this.startArray(0,this.index);
87 turn=1;
88 }else{
89 addClass(this,_this.up)
90 _this.startArray(1,this.index);
91 turn=0;
92 }
93 }
94 },
95 //设置选中列样式
96 colClassSet:function(num,cla){
97 //得到关联到的td
98 for(var i= (this.startRow-1);i<(this.endRow);i++){
99 for(var n=0;n<this.rows[i].cells.length;n++){
100 removeClass(this.rows[i].cells[n],cla);
101 }
102 addClass(this.rows[i].cells[num],cla);
103 }
104 },
105 //开始排序 num 根据第几列排序 aord 逆序还是顺序
106 startArray:function(aord,num){
107 var afterSort = this.sortMethod(this.T2Arr,aord,num);//排序后的二维数组传到排序方法中去
108 this.array2Td(num,afterSort);//输出
109 },
110 //将受影响的行和列转换成二维数组
111 _td2Array:function(){
112 var arr=[];
113 for(var i=(this.startRow-1),l=0;i<(this.endRow);i++,l++){
114 arr[l]=[];
115 for(var n=0;n<this.rows[i].cells.length;n++){
116 arr[l].push(this.rows[i].cells[n].innerHTML);
117 }
118 }
119 return arr;
120 },
121 //根据排序后的二维数组来输出相应的行和列的 innerHTML
122 array2Td:function(num,arr){
123 this.colClassSet(num,this.selectClass);
124 for(var i= (this.startRow-1),l=0;i<(this.endRow);i++,l++){
125 for(var n=0;n<this.Tags.length;n++){
126 this.rows[i].cells[n].innerHTML = arr[l][n];
127 }
128 }
129 },
130 //传进来一个二维数组，根据二维数组的子项中的w项排序，再返回排序后的二维数组
131 sortMethod:function(arr,aord,w){
132 //var effectCol = this.getColByNum(whichCol);
133 arr.sort(function(a,b){
134 x = killHTML(a[w]);
135 y = killHTML(b[w]);
136 x = x.replace(/,/g,'');
137 y = y.replace(/,/g,'');
138 switch (isNaN(x)){
139 case false:
140 return Number(x) - Number(y);
141 break;
142 case true:
143 return x.localeCompare(y);
144 break;
145 }
146 });
147 arr = aord==0?arr:arr.reverse();
148 return arr;
149 }
150 }
151 /*-----------------------------------*/
152 function addEventListener(o,type,fn){
153 if(o.attachEvent){o.attachEvent('on'+type,fn)}
154 else if(o.addEventListener){o.addEventListener(type,fn,false)}
155 else{o['on'+type] = fn;}
156 }
157
158 function hasClass(element, className) {
159 var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
160 return element.className.match(reg);
161 }
162
163 function addClass(element, className) {
164 if (!this.hasClass(element, className))
165 {
166 element.className += " "+className;
167 }
168 }
169
170 function removeClass(element, className) {
171 if (hasClass(element, className)) {
172 var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
173 element.className = element.className.replace(reg,' ');
174 }
175 }
176
177 var Bind = function(object, fun) {
178 return function() {
179 return fun.apply(object, arguments);
180 }
181 }
182 //去掉所有的html标记
183 function killHTML(str){
184 return str.replace(/<[^>]+>/g,"");
185 }
186 //------------------------------------------------
187 //tableid 第几行是标签行，从第几行开始排序，第几行结束排序(999表示最后) 升序标签样式，降序标签样式选中列样式
188 //注意标签行的class应该是一致的
189 var ex1 = new tableSort('table',1,2,999,'up','down','hov');
190 </script>
191
192
193 <br><br>
194 </body>
195 </html>

http://www.corange.cn//uploadfiles/sorttable2_38545.rar

原文地址:http://www.corange.cn/archives/2010/04/3599.html