js高级表格排序

源码无需任何修改，直接复制即可，建议放在head区，最好单独存一个js文件然后在head区引用进来。
然后为每个要排序的表格设置一个id，比如此例中的tb_1。记得这个table需要thead和tbody元素，否则dom节点解析会出错。thead里放一行标题，建议用th，然后为每个th加入以下属性： οnclick="sortTable('tb_1', *)" style="cursor:pointer;"，第2个style是为了让鼠标指上去发生变化（变成手指），第1个是点击事件。
其中tb_1即是这个table的ID，紧随的*符号是列号，第1个th就用0，第2个用1……以此类推。默认的这种属性是按字母排列的，如果这列是整数排列的话请加入第3个参数'int'，就像这样： οnclick="sortTable('tb_1', *, 'int')" style="cursor:pointer;"，如果带有小数请用参数'float'，如果是日期请用'date'。
另外不是以上类型的比较时——比如图片排序——请在每个图片前加入隐藏div域，例子请看本例，隐藏div的方法是将它设置display:hidden;即可。这样图片便按照隐藏div域里的文字内容排序。

想研究代码的人读下思想：
基本注释都很完善了。设置id的目的就是为了在点击标题发生事件时传入这个table的id参数，在js里获取这个id从而找到这个table的dom节 点，然后通过相应节点访问方法把每行tr的指针存入一个数组，对数组进行排序。值得注意的是排完顺序的数组不是直接把tr指针写入文件，这样会大大增加开 销；而是创建了一个文档碎片放入排好顺序的内容后在appand到tbody上。注意这里数组存的是tr节点，由于节点都是指针引用，因此可以直接附上而 无需先删除原有tr再增加了。

还值得一说的就是数组的sort方法，它接受一个函数参数，用这个可以指定排序方法。这个参数很神奇，我也是第一次看到这种方式的调用，好用且古怪的感觉……

< table width = " 550 "  align = " center "  cellpadding = " 0 "  cellspacing = " 0 "  id = " tb_1 " >
< thead >
     < tr >
      < th width = " 7% "  onclick = " sortTable('tb_1', 0) "  style = " cursor:pointer; " > 代码 < / th>
      < th onclick = " sortTable('tb_1', 1) "  style = " cursor:pointer; "   / >图< / th >
      < th width = " 18% "  onclick = " sortTable('tb_1', 2) "  style = " cursor:pointer; " > 英文名 < / th>
      < th width = " 18% "  onclick = " sortTable('tb_1', 3) "  style = " cursor:pointer; " > 日文名 < / th>
      < th align = " center "  onclick = " sortTable('tb_1', 4) "  style = " cursor:pointer; " > 作用 < / th>
      < th width = " 10% "  onclick = " sortTable('tb_1', 5, 'int') "  style = " cursor:pointer; " > Gil < / th>
     < / tr>
< / thead>
         < tbody >
         < tr >
          < td > sadsa < / td>
          < td > 1111 < / td>
          < td > 112 < / td>
          < td > 3232 < / td>
          < td > 32321 < / td>
          < td > 313131 < / td>
          < / tr>

          < tr >
          < td > aw3123 < / td>
          < td > dadaf3423 < / td>
          < td > 112 < / td>
          < td > dasd < / td>
          < td > 32321 < / td>
          < td > 313131 < / td>
          < / tr>

          < tr >
          < td > sadadadasdadsa < / td>
          < td > 11adasdas11 < / td>
          < td > 112 < / td>
          < td > dasdad < / td>
          < td > 32sad321 < / td>
          < td > sadadsa < / td>
          < / tr>

          < tr >
          < td > sads553453a < / td>
          < td > 1s111 < / td>
          < td > hd < / td>
          < td > 32u32 < / td>
          < td > 32tuyiu321 < / td>
          < td > iuyiy < / td>
          < / tr>
     < / tbody>
< table >

< script type = " text/javascript " >

function  convert(sValue, sDataType) {
      // 将要排序的数据转换成对应的数据类型，第2个参数默认没有即为String类型比较
      switch (sDataType) {
        case   " int " :
          return  parseInt(sValue);
        case   " float " :
          return  parseFloat(sValue);
        case   " date " :
          return   new  Date(Date.parse(sValue));
        default :
          return  sValue.toString();  
     }
}

function  generateCompareTRs(iCol, sDataType) {
      // 闭包比较函数，用以数组的sort()方法调用
      return   function  compareTRs(oTR1, oTR2) {
        var  vValue1, vValue2;
        if (oTR1.cells[iCol].firstChild  !=  oTR1.cells[iCol].lastChild) {
          // 当所比较对象不是数值、字符串、日期等基本类型时，隐藏的<div />标识节点和比较节点不相等
         vValue1  =  convert(oTR1.cells[iCol].firstChild.firstChild.nodeValue, sDataType);
         vValue2  =  convert(oTR2.cells[iCol].firstChild.firstChild.nodeValue, sDataType);
       }
        else  {
          // 或者比较基本类型时，此行<tr />只有要比较的内容一个节点，自己等于自己
         vValue1  =  convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
         vValue2  =  convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
       }
        // 比较大小
        if  (vValue1  <  vValue2) {
          return   - 1 ;
       }  else   if  (vValue1  >  vValue2) {
          return   1 ;
       }  else  {
          return   0 ;
       }
     };
}

function  sortTable(sTableID, iCol, sDataType) {
      // 获取要排序表格的数据行
      var  oTable  =  document.getElementById(sTableID);
      var  oTBody  =  oTable.tBodies[ 0 ];
      var  colDataRows  =  oTBody.rows;
      var  aTRs  =   new  Array();  // 创建一个数组将全部<tr />的指针放入
  
      for  ( var  i = 0 ; i  <  colDataRows.length; i ++ ) {
       aTRs[i]  =  colDataRows[i];
     }
   
      if  (oTable.sortCol  ==  iCol) {
        // 如果已经对此列排过一次序，再排则直接倒序
       aTRs.reverse();
     }  else  {
        // 否则对数组适用sort方法调用，参数为已定义的比较函数
       aTRs.sort(generateCompareTRs(iCol, sDataType));
     }
      // 创建文档碎片缓存提高写入速度
      var  oFragment  =  document.createDocumentFragment();
      for  ( var  i = 0 ; i  <  aTRs.length; i ++ ) {
       oFragment.appendChild(aTRs[i]);
     }
     oTBody.appendChild(oFragment);

     oTable.sortCol  =  iCol;  // 标识此列是否已经排过一次顺序
}
-->
< / script>

 

 

 

转载于:https://www.cnblogs.com/tonybinlj/archive/2009/06/30/1513750.html