1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > 纯手写的表格排序</ title >
6+ < style >
7+
8+ table {
9+ font-family : verdana, arial, sans-serif;
10+ color : # 333333
11+ border-width : 1px ;
12+ border-collapse : collapse;
13+ }
14+
15+ th , td {
16+ border : 1px solid # 98bf21
17+ padding : 8px ;
18+ border-width : 1px ;
19+ border-style : solid;
20+ }
21+
22+ tbody tr {
23+ color : # 000000
24+ background-color : # EAF2D3
25+ }
26+
27+ thead tr {
28+ background-color : # A7C942
29+ color : # ffffff
30+ }
31+
32+ </ style >
33+ </ head >
34+ < body >
35+ < table id ="sales1 ">
36+ < caption > Quarterly sales 可以排序的单元格*</ caption >
37+ < thead >
38+ < tr >
39+ < th > Companies</ th >
40+ < th > Q1</ th >
41+ < th > Q2</ th >
42+ < th > Q3</ th >
43+ < th > Q4</ th >
44+ </ tr >
45+ </ thead >
46+ < tbody contenteditable ="true ">
47+ < tr >
48+ < td > Company A</ td >
49+ < td > $621</ td >
50+ < td > $942</ td >
51+ < td > $224</ td >
52+ < td > $486</ td >
53+ </ tr >
54+ < tr >
55+ < td > Company B</ td >
56+ < td > $147</ td >
57+ < td > $1,325</ td >
58+ < td > $683</ td >
59+ < td > $524</ td >
60+ </ tr >
61+ < tr >
62+ < td > Company C</ td >
63+ < td > $135</ td >
64+ < td > $2,342</ td >
65+ < td > $33</ td >
66+ < td > $464</ td >
67+ </ tr >
68+ < tr >
69+ < td > Company D</ td >
70+ < td > $164</ td >
71+ < td > $332</ td >
72+ < td > $331</ td >
73+ < td > $438</ td >
74+ </ tr >
75+ < tr >
76+ < td > Company E</ td >
77+ < td > $199</ td >
78+ < td > $902</ td >
79+ < td > $336</ td >
80+ < td > $1,427</ td >
81+ </ tr >
82+ </ tbody >
83+ </ table >
84+ < i > 点击第一行单元格排序</ i >
85+ </ body >
86+ < script >
87+ /***
88+ * create by <蛙哥>
89+ 90+ * Date 2015/3/8
91+ */
92+
93+
94+ function TableSort ( id ) {
95+ this . tbl = document . getElementById ( id ) ;
96+ if ( this . tbl && this . tbl . nodeName == 'TABLE' ) {
97+ this . makeSortable ( ) ;
98+ this . makeZebra ( ) ;
99+ }
100+ }
101+
102+ //生成斑马纹
103+ TableSort . prototype . makeZebra = function ( ) {
104+ var tBody = this . tbl . tBodies [ 0 ] . rows ;
105+ for ( var i = 0 ; tBody [ i ] ; i ++ ) {
106+ if ( i % 2 ) {
107+ tBody [ i ] . style . backgroundColor = '#EAF2D3' ;
108+ } else {
109+ tBody [ i ] . style . backgroundColor = 'white' ;
110+ }
111+ }
112+ }
113+ //可排序的表格
114+ TableSort . prototype . makeSortable = function ( ) {
115+ var headings = this . tbl . tHead . rows [ 0 ] . cells ;
116+ var that = this ;
117+ for ( var i = 0 ; headings [ i ] ; i ++ ) {
118+ headings [ i ] . cIdx = i ;
119+ headings [ i ] . onclick = function ( e ) {
120+ var target = e . target || e . srcElement ;
121+ that . sortCol ( target )
122+ }
123+ }
124+ }
125+ //排序核心方法
126+ TableSort . prototype . sortCol = function ( el ) {
127+ //获取html表格中将被排序的那列数据
128+ var rows = this . tbl . rows ;
129+ var alpha = [ ] , numeric = [ ] ;
130+ var aIdx = 0 , nIdx = 0 ;
131+ var td = el ;
132+ var cellIndex = td . cIdx ;
133+ for ( var i = 1 ; rows [ i ] ; i ++ ) {
134+ var cell = rows [ i ] . cells [ cellIndex ] ;
135+ var content = cell . textContent ? cell . textContent : cell . innerText ;
136+ //区分文本和数字
137+ var num = content . replace ( / ( \$ | \, | \s ) / g, '' ) ;
138+ if ( parseFloat ( num ) == num ) {
139+ numeric [ nIdx ++ ] = {
140+ value : Number ( num ) ,
141+ row : rows [ i ]
142+ }
143+ } else {
144+ alpha [ aIdx ++ ] = {
145+ value : content ,
146+ row : rows [ i ]
147+ }
148+ }
149+ }
150+
151+ //排序
152+ var col = [ ] , top , bottom ;
153+ if ( td . className . match ( "asc" ) ) {
154+ top = bubbleSort ( alpha , - 1 ) ;
155+ bottom = bubbleSort ( numeric , - 1 ) ;
156+ td . className = "dsc" ;
157+ } else {
158+ top = bubbleSort ( alpha , 1 ) ;
159+ bottom = bubbleSort ( numeric , 1 ) ;
160+ td . className = 'asc' ;
161+ }
162+
163+ col = top . concat ( bottom ) ;
164+ var tBody = this . tbl . tBodies [ 0 ] ;
165+ //非常好的交换元素的方法
166+ for ( var i = 0 ; col [ i ] ; i ++ ) {
167+ tBody . appendChild ( col [ i ] . row ) ;
168+ }
169+ this . makeZebra ( ) ;
170+ }
171+
172+ //冒泡排序
173+ function bubbleSort ( arr , dir ) {
174+ var start , end ;
175+ if ( dir === 1 ) {
176+ start = 0 ;
177+ end = arr . length ;
178+ } else if ( dir === - 1 ) {
179+ start = arr . length - 1 ;
180+ end = - 1 ;
181+ }
182+
183+ var unsorted = true ;
184+
185+ while ( unsorted ) {
186+ unsorted = false ;
187+ for ( var i = start ; i != end ; i = i + dir ) {
188+ if ( arr [ i + dir ] && arr [ i ] . value > arr [ i + dir ] . value ) {
189+ //a=1,b=2;a=[b,b=a][0];==>a=2,b=1;
190+ arr [ i ] = [ arr [ i + dir ] , arr [ i + dir ] = arr [ i ] ] [ 0 ] ;
191+ unsorted = true ;
192+ }
193+ }
194+ }
195+ return arr ;
196+ }
197+
198+
199+ var table1 = new TableSort ( 'sales1' ) ;
200+
201+ </ script >
202+ </ html >
0 commit comments