JavaScript 在客户端如何实现对表格数据的升降排序

<html><head>    <title>JavaScript 在客户端如何实现对表格数据的升降排序</title></head><body>    <table id="tbPerson" border="1" style="text-align: center;">        <caption>            <b>三国群英</b>        </caption>        <thead>            <tr>                <td style="width: 211px" οnclick="JavaScript:sortTable('tbPerson',0)">                    <b>武将</b>                </td>                <td style="width: 274px" οnclick="JavaScript:sortTable('tbPerson',1,'int')">                    <b>武力</b></td>                <td style="width: 274px" οnclick="JavaScript:sortTable('tbPerson',2,'date')">                    <b>生日</b>                </td>            </tr>        </thead>        <tfoot>点击表头以实现表格数据的升/降排序</tfoot>        <tbody>            <tr>                <td style="width: 211px; height: 25px">                    刘备                </td>                <td style="width: 274px; height: 25px">                    76                </td>                <td style="width: 274px; height: 25px">                    163-10-10                </td>            </tr>            <tr>                <td style="width: 211px">                    周瑜                </td>                <td style="width: 274px">                    80                </td>                <td style="width: 274px">                    178-07-08                </td>            </tr>            <tr>                <td style="width: 211px">                    张飞                </td>                <td style="width: 274px">                    97                </td>                <td style="width: 274px">                    165-02-23                </td>            </tr>            <tr>                <td style="width: 211px">                    文丑                </td>                <td style="width: 274px">                    93                </td>                <td style="width: 274px">                    166-05-11                </td>            </tr>                    </tbody>        </table>   </body></html>

<script language="JavaScript" type="text/JavaScript">function sortTable(table_id,col_num,datatype){ var oTable = document.getElementById(table_id); var oTbody = oTable.tBodies[0]; var oTrs = oTbody.rows; var arrTrs = new Array(); //alert(1); for(var i=0;i<oTrs.length;i++) {     arrTrs[i] = oTrs[i]; }  if(oTable.sortCol ==col_num)    arrTrs.reverse(); else    arrTrs.sort(generateCompareTrs(col_num,datatype));     var fragment = document.createDocumentFragment(); for(var i=0;i<arrTrs.length;i++) {     fragment.appendChild(arrTrs[i]); } oTbody.appendChild(fragment); oTable.sortCol = col_num;

}function generateCompareTrs(col_num,datatype){    return function compareItem(arrTrs_item1,arrTrs_item2,datatype){           var value1 = convertType(arrTrs_item1.cells[col_num].firstChild.nodeValue,datatype);           var value2 = convertType(arrTrs_item2.cells[col_num].firstChild.nodeValue,datatype);                      if(value1 < value2)              return -1;           else if(value1 >value2)              return 1;           else              return 0;                                    } }function convertType(value,datatype){ switch(datatype) {         case "int":            return parseInt(value);         case "float":            return parseFloat(value);         case "date":            return new Date(Date.parse(value));          default:             return value.toString();    }  }

</script>