jquery点击table表头排序

  • A+
所属分类:jQuery

jquery点击table表头排序

Views

  1. <table id="tableID">    
  2.    <thead>    
  3.       <tr>    
  4.         <th>    
  5.             序号    
  6.         </th>    
  7.         <th>    
  8.            书名    
  9.          </th>    
  10.       </tr>    
  11.    </thead>    
  12.    <tbody>    
  13.      <tr>    
  14.             <td>    
  15.                 1    
  16.              </td>    
  17.              <td>    
  18.                 狼图腾    
  19.              </td>    
  20.        </tr>    
  21. <span style="white-space:pre">        </span> </tbody>    
  22.         </table>    

Jquery

  1. $(function () {    
  2.     var tableObject = $('#tableID'); //获取id为tableSort的table对象    
  3.     var tbHead = tableObject.children('thead'); //获取table对象下的thead    
  4.     var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th    
  5.     var tbBody = tableObject.children('tbody'); //获取table对象下的tbody    
  6.     var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr    
  7.     
  8.     var sortIndex = -1;    
  9.     
  10.     tbHeadTh.each(function () {//遍历thead的tr下的th    
  11.         var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号    
  12.         //给表态th增加鼠标位于上方时发生的事件    
  13.         $(this).mouseover(function () {    
  14.             tbBodyTr.each(function () {//编列tbody下的tr    
  15.                 var tds = $(this).find("td"); //获取列号为参数index的td对象集合    
  16.                 $(tds[thisIndex]).addClass("hover"); //给列号为参数index的td对象添加样式    
  17.             });    
  18.         }).mouseout(function () {//给表头th增加鼠标离开时的事件    
  19.             tbBodyTr.each(function () {    
  20.                 var tds = $(this).find("td");    
  21.                 $(tds[thisIndex]).removeClass("hover"); //鼠标离开时移除td对象上的样式    
  22.             });    
  23.         });    
  24.     
  25.         $(this).click(function () {//给当前表头th增加点击事件    
  26.             var dataType = $(this).attr("type"); //点击时获取当前th的type属性值    
  27.             var trsValue = new Array();            //先声明一维    
  28.             for (var i = 0; i < tbBodyTr.length; i++) {    
  29.                 trsValue[i] = new Array();         //在声明二维    
  30.                 var tds = $(tbBodyTr[i]).find('td');    
  31.                 trsValue[i][1] = $(tds[$(this).index()]).html();    
  32.                 trsValue[i][2] = $(tbBodyTr[i]).html();    
  33.                 $(tbBodyTr[i]).html("");    
  34.             }    
  35.             var len = trsValue.length;    
  36.     
  37.             if ($(this).index() == sortIndex) {    
  38.                 //如果已经排序了则直接倒序    
  39.                 trsValue.reverse();    
  40.             } else {    
  41.                 trsValue.sort(createCompact(dataType));    
  42.             }    
  43.             for (var i = 0; i < len; i++) {    
  44.                 $("tbody tr:eq(" + i + ")").html(trsValue[i][2]);    
  45.             }    
  46.     
  47.             sortIndex = $(this).index();    
  48.         });    
  49.     });    
  50.     
  51.     $("tbody tr").removeClass(); //先移除tbody下tr的所有css类    
  52.     //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色    
  53.     $("tbody tr").mouseover(function () {    
  54.         $(this).addClass("hover");    
  55.     }).mouseout(function () {    
  56.         $(this).removeClass("hover");    
  57.     });    
  58.     
  59. });    
  60.     
  61. function createCompact(styType) {    
  62.     return function (object1, object2) {    
  63.         var value1 = object1[1];    
  64.         var value2 = object2[1];    
  65.         if (styType == "number") {    
  66.             //处理数字排序    
  67.             return value2 - value1;    
  68.         } else {    
  69.             if (value1 < value2) {    
  70.                 return -1;    
  71.             } else if (value1 > value2) {    
  72.                 return 1;    
  73.             } else {    
  74.                 return 0;    
  75.             }    
  76.         }    
  77.     
  78.     }    
  79. }    

Jquery文件下载

[dltable file="Table_PaiXu.js" size="3KB"]https://pan.baidu.com/s/1kVlVoOJ[/dltable]

钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: