JavaScript對Table進行排序(jQuery)

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>StripingTable</title>
 <script src="jquery-1.2.1.js" type="text/javascript"></script>
 <script src="jquery.tablesorter.js" type="text/javascript"></script> 
 <script type="text/javascript">
 $(function(){
  formatTable("tb");
 });
 
 //var sortCol;
 var storeTable = {
  sortCol:null,
  storeTableByColIndex:function(sTableId,colIndex,sType){
   var oTable = $("#" + sTableId);
   var trList = oTable.find("tbody>tr");
   var arrTr = trList.get();

   if(storeTable.sortCol==colIndex){
    arrTr.reverse();
   }
   else {
    arrTr.sort(storeTable.generateCompareTrs(colIndex,sType));
   }
   oTable.find("tbody").html($(arrTr));

   storeTable.sortCol = colIndex;
   formatTable(sTableId);//格式化Table
  },
  convert:function(sValue,sDataType){
   switch(sDataType)
   {
    case "int":
     return parseInt(sValue,10);
     break;
    case "float":
     return parseFloat(sValue);
     break;
    case "date":
     return new Date(Date.parse(sValue));
     break;
    default:
     return sValue.toString();
   }
  },
  generateCompareTrs:function(iCol,sDataType){
   return  function compareTrs(oTr1,oTr2)
   {
    var vValue1 = storeTable.convert(oTr1.children[iCol].innerText,sDataType);
    var vValue2 = storeTable.convert(oTr2.children[iCol].innerText,sDataType);
    if(vValue1 < vValue2)
    {
     return -1;
    }
    else if(vValue1> vValue2)
    {
     return 1;
    }
    else
    {
     return 0;
    }
   }
  }
 }

 function formatTable(sTableId){
  $("#"+sTableId).find("tbody>tr").removeClass("alt");
  $(".stripe tr").mouseover(function(){
   $(this).addClass("over");}).mouseout(function(){
   $(this).removeClass("over");});
  $(".stripe tr:even").addClass("alt");
 }
 </script>
 <style>
 th {
  cursor:hand;
  background:#0066FF;
  color:#FFFFFF;
  line-height:20px;
  height:30px;
 }
 
 td {
  padding:6px 11px;
  border-bottom:1px solid #95bce2;
  vertical-align:top;
  text-align:center;
 }
 
 td * {
   padding:6px 11px;
 }
 
 tr.alt td {
  background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
 }
 
 tr.over td {
  background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
 }
 </style>
 </head>
 
 <body>
  <div id="msg" >drag me!</div>
  <table id="tb" class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0">
  <!--用class="stripe"来标识需要使用该效果的表格-->
  <thead>
    <tr>
   <th onclick="storeTable.storeTableByColIndex('tb',0)">姓名</th>
   <th onclick="storeTable.storeTableByColIndex('tb',1,'int')">年龄</th>
   <th onclick="storeTable.storeTableByColIndex('tb',2,'int')">QQ</th>
   <th onclick="storeTable.storeTableByColIndex('tb',3,'date')">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
   <td>邓国梁1</td>
   <td>23</td>
   <td>31540201</td>
   <td>2007/1/1</td>
    </tr>
    <tr>
   <td>邓国梁1</td>
   <td>2</td>
   <td>31540201</td>
   <td>2007/1/2</td>
    </tr>
    <tr>
   <td>邓国梁3</td>
   <td>20</td>
   <td>31540203</td>
   <td>2007/4/1</td>
    </tr>
    <tr>
   <td>邓国梁4</td>
   <td>190</td>
   <td>31540204</td>
   <td>2007/3/1</td>
    </tr>
    <tr>
   <td>邓国梁4</td>
   <td>100</td>
   <td>31540204</td>
   <td>2007/5/1</td>
    </tr>
  </tbody>
  </table>
 </body>
</html>

原文地址:https://www.cnblogs.com/chy8219/p/1018468.html