JS 点击标题进行排序

93 阅读 0 评论 62 点赞

我是靠谱客的博主辛勤冰淇淋，最近开发中收集的这篇文章主要介绍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.排序前