JS 点击标题进行排序

151 阅读 0 评论 100 点赞

我是靠谱客的博主辛勤冰淇淋，这篇文章主要介绍JS 点击标题进行排序，现在分享给大家，希望可以做个参考。

复制代码

<!DOCTYPE html>
<html>
 <head> 
  <title>JS点击标题排序</title> 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> 
  <meta http-equiv="description" content="this is my page" /> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <style type="text/css">
 *{padding:0;margin:0;}
  body{font-family:"微软雅黑";font-size:12px;}
  .wwwzzjsnet{width:550px;margin:20px auto;border-collapse:collapse;border:2px solid #666;text-align:center;}
  table {width:100%;}  
  .wwwzzjsnet h1{background:#77DDFF;}
  .wwwzzjsnet th{line-height:30px;color:#007D28;}
  .wwwzzjsnet tr{background-color:#E8FFE8;}
  .wwwzzjsnet tr td{border:0px solid #666;line-height:30px;}
  .wwwzzjsnet tr th{background:#ccf;color:#000;}
  .wwwzzjsnet tr:hover{background:#FFF3EE;}
  .cursor{cursor: pointer;} /*鼠标移动到标题上显示小手*/   
 </style> 
  <script type="text/javascript">

//比较之前进行数据转换   
  function data_conversion(value, dataType) {
    switch(dataType) {
     case "int":
        return parseInt(value);
        break
     case "float":
        return parseFloat(value);
        break
     case "date":
        return Date.parse(value);
        break
     default:
        return value.toString();
    }
  }
 
  //用于sort比较字符串
  function comparison_character(col, dataType) {
    return function compareTrs(tr1, tr2) {
     value1 = data_conversion(tr1.cells[col].innerHTML, dataType);
     value2 = data_conversion(tr2.cells[col].innerHTML, dataType);
     if (value1 < value2) {
        return -1;
     } else if (value1 > value2) {
        return 1;
     } else {
        return 0;
     }
   };
  }  
 
 //对表格进行排序
 function table_sort(tableId, col, dataType) {
  
    var table = document.getElementById(tableId);  // 获取table表ID
    var tbody = table.tBodies[0]; // 获取body
    var tr = tbody.rows;  // body获取行  
    var trValue = new Array();
   
    for (var i=0; i<tr.length; i++ ) {
      trValue[i] = tr[i];  //将表格中各行的信息存储在新建的数组中
    }
   
    if (tbody.sortCol == col) {
      trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
    } else {
      trValue.sort(comparison_character(col, dataType));  //进行排序
    }
   
    var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果
  
    for (var i=0; i<trValue.length; i++ ) {
      fragment.appendChild(trValue[i]);
    }
  
    tbody.appendChild(fragment); //将排序的结果替换掉之前的值
   tbody.sortCol = col;
 }

</script> 
 </head> 
 <body> 
  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 
  <div class="wwwzzjsnet"> 
   <h1>会员信息表(点击表格标题可进行排序)</h1> 
   <table id="table_jm"> 
    <thead> 
     <tr> 
      <th οnclick="table_sort('table_jm', 0, 'int')" class="cursor">会员ID</th> 
      <th οnclick="table_sort('table_jm', 1)" class="cursor">会员名</th> 
      <th οnclick="table_sort('table_jm', 2)" class="cursor">邮箱</th> 
      <th οnclick="table_sort('table_jm', 3)" class="cursor">会员组</th> 
      <th οnclick="table_sort('table_jm', 4)" class="cursor">城市</th> 
      <th οnclick="table_sort('table_jm', 5, 'date')" class="cursor">注册时间</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>德玛</td> 
      <td>admin1@jm.net</td> 
      <td>普通会员</td> 
      <td>北京</td> 
      <td>2011-04-13</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>剑圣</td> 
      <td>admin2@jm.net</td> 
      <td>中级会员</td> 
      <td>合肥</td> 
      <td>2012-03-27</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>石头</td> 
      <td>admin3@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2013-04-01</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>雪人</td> 
      <td>admin4@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>老鼠</td> 
      <td>admin5@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
     <tr> 
      <td>6</td> 
      <td>雷神</td> 
      <td>admin6@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
 <head> 
  <title>JS点击标题排序</title> 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3" /> 
  <meta http-equiv="description" content="this is my page" /> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <style type="text/css">
 *{padding:0;margin:0;}
  body{font-family:"微软雅黑";font-size:12px;}
  .wwwzzjsnet{width:550px;margin:20px auto;border-collapse:collapse;border:2px solid #666;text-align:center;}
  table {width:100%;}  
  .wwwzzjsnet h1{background:#77DDFF;}
  .wwwzzjsnet th{line-height:30px;color:#007D28;}
  .wwwzzjsnet tr{background-color:#E8FFE8;}
  .wwwzzjsnet tr td{border:0px solid #666;line-height:30px;}
  .wwwzzjsnet tr th{background:#ccf;color:#000;}
  .wwwzzjsnet tr:hover{background:#FFF3EE;}
  .cursor{cursor: pointer;} /*鼠标移动到标题上显示小手*/   
 </style> 
  <script type="text/javascript">

  //比较之前进行数据转换   
  function data_conversion(value, dataType) {
    switch(dataType) {
     case "int":
        return parseInt(value);
        break
     case "float":
        return parseFloat(value);
        break
     case "date":
        return Date.parse(value);
        break
     default:
        return value.toString();
    }
  }
 
  //用于sort比较字符串
  function comparison_character(col, dataType) {
    return function compareTrs(tr1, tr2) {
     value1 = data_conversion(tr1.cells[col].innerHTML, dataType);
     value2 = data_conversion(tr2.cells[col].innerHTML, dataType);
     if (value1 < value2) {
        return -1;
     } else if (value1 > value2) {
        return 1;
     } else {
        return 0;
     }
   };
  }  
 
 //对表格进行排序
 function table_sort(tableId, col, dataType) {
  
    var table = document.getElementById(tableId);  // 获取table表ID
    var tbody = table.tBodies[0]; // 获取body
    var tr = tbody.rows;  // body获取行  
    var trValue = new Array();
   
    for (var i=0; i<tr.length; i++ ) {
      trValue[i] = tr[i];  //将表格中各行的信息存储在新建的数组中
    }
   
    if (tbody.sortCol == col) {
      trValue.reverse(); //如果该列已经进行排序过了，则直接对其反序排列
    } else {
      trValue.sort(comparison_character(col, dataType));  //进行排序
    }
   
    var fragment = document.createDocumentFragment();  //新建一个代码片段，用于保存排序后的结果
  
    for (var i=0; i<trValue.length; i++ ) {
      fragment.appendChild(trValue[i]);
    }
  
    tbody.appendChild(fragment); //将排序的结果替换掉之前的值
   tbody.sortCol = col;
 }  

</script> 
 </head> 
 <body> 
  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 
  <div class="wwwzzjsnet"> 
   <h1>会员信息表(点击表格标题可进行排序)</h1> 
   <table id="table_jm"> 
    <thead> 
     <tr> 
      <th οnclick="table_sort('table_jm', 0, 'int')" class="cursor">会员ID</th> 
      <th οnclick="table_sort('table_jm', 1)" class="cursor">会员名</th> 
      <th οnclick="table_sort('table_jm', 2)" class="cursor">邮箱</th> 
      <th οnclick="table_sort('table_jm', 3)" class="cursor">会员组</th> 
      <th οnclick="table_sort('table_jm', 4)" class="cursor">城市</th> 
      <th οnclick="table_sort('table_jm', 5, 'date')" class="cursor">注册时间</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>德玛</td> 
      <td>admin1@jm.net</td> 
      <td>普通会员</td> 
      <td>北京</td> 
      <td>2011-04-13</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>剑圣</td> 
      <td>admin2@jm.net</td> 
      <td>中级会员</td> 
      <td>合肥</td> 
      <td>2012-03-27</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>石头</td> 
      <td>admin3@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2013-04-01</td> 
     </tr> 
     <tr> 
      <td>4</td> 
      <td>雪人</td> 
      <td>admin4@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
     <tr> 
      <td>5</td> 
      <td>老鼠</td> 
      <td>admin5@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
     <tr> 
      <td>6</td> 
      <td>雷神</td> 
      <td>admin6@jm.net</td> 
      <td>普通会员</td> 
      <td>南昌</td> 
      <td>2014-04-01</td> 
     </tr> 
    </tbody> 
   </table> 
  </div>  
 </body>
</html>