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再增加了。
然后为每个要排序的表格设置一个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>
<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>
