js高级表格排序

源码无需任何修改，直接复制即可，建议放在head区，最好单独存一个js文件然后在head区引用进来。
然后为每个要排序的表格设置一个id，比如此例中的tb_1。记得这个table需要thead和tbody元素，否则dom节点解析会出错。thead里放一行标题，建议用th，然后为每个th加入以下属性：onclick="sortTable('tb_1', *)" style="cursor:pointer;"，第2个style是为了让鼠标指上去发生变化（变成手指），第1个是点击事件。
其中tb_1即是这个table的ID，紧随的*符号是列号，第1个th就用0，第2个用1……以此类推。默认的这种属性是按字母排列的，如果这列是整数排列的话请加入第3个参数'int'，就像这样：onclick="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>