首页 > 代码库 > 使用js实现表头排序

使用js实现表头排序

工作中遇到需要表头排序的地方,我从网上参考很一些东西,汇总一下,写出来这个排序函数,这个运用了array对象的sort()方法,感觉还不错,实现的逻辑比较简单。还有就是排序列是时间格式,用到了正则表达式做了个替换,并转化为时间对象,这两点是整个排序所用到的关键技术

<html>
 <head>
 </head>
 <body>
  <table id="tbSort">
   <thead>
       <tr>
           <th onclick="sortTime(this);">日期</th><th>数字</th><th>字符串</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>2014-10-12 10:20</td>
           <td>1</td>
           <td>李孟宁</td>
       </tr>
       <tr>
           <td>2014-10-12 10:21</td>
           <td>1</td>
           <td>Tom</td>
       </tr>
       <tr>
           <td>2014-10-12 10:22</td>
           <td>1</td>
           <td>Jerry</td>
       </tr>
       <tr>
           <td>2014-10-11</td>
           <td>3</td>
           <td>Lina</td>
       </tr>
       <tr>
           <td>2014-4-22</td>
           <td>2</td>
           <td>Steven</td>
       </tr>
       <tr>
           <td>2014-11-1</td>
           <td>5</td>
           <td>John</td>
       </tr>
   </tbody>
  </table>
 </body>
  <script type="text/javascript">
      function sortTime(title) {                   //title参数是所点击的表头所在的单元格对象
          var a = title.cellIndex;                //获取其单元格在本列中的位置
          var table = document.getElementById("tbSort").tBodies[0];  //获取到table的第一个tbody对象(当然这里只有一个)
          var rows = table.rows;
          var arr = new Array();                        //声明一个array对象来储存rows
          for (var i = 1; i < rows.length; i++) {
              arr.push(rows[i]);                              //将rows存储至array数组
          }
          if (table.sortFlag == a) {            //使用table对象的sortFlag属性作为排序的标记,如果这个标记等于当前列,则按此列倒序输出
              arr.reverse();
          }
          else {                                       //如果排序的不是此列,则进行排序
              arr.sort(function(r1, r2) {             //使用array对象的sort函数,这里因为是日期时间排序,所以要给出自定义的比较函数来判断两个值的大小,
                  var t1 = new Date(r1.cells[a].innerHTML.replace(/-/g, "/"));      //格式为:function(a,b){}比较a,b返回比较结果
                  var t2 = new Date(r2.cells[a].innerHTML.replace(/-/g, "/"));                 //如果a>b,则返回正整数,a=b返回0,a<b返回负整数
                  if (t1 < t2) return -1;                                                                         //replace函数进行正则表达式的替换,然后创建出t1,t2的Date类型的变量,以便比较
                  else if (t1 > t2) return 1; 
                  else return 0;
              });
          }
          for (var i = 0; i < arr.length; i++) {
              table.appendChild(arr[i]);                      //将排序结果输出到table中。
          }
          table.sortFlag = a;
      }
  </script>

使用js实现表头排序