![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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 >
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