简单的表格排序 HTML
程序员文章站
2022-04-03 10:05:42
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>多列表排序</title>
<script type="text/javascript">
//多列表排序
function generateComapreTRs(iCol)
{
return function compareTRs(oTR1,oTR2)
{
var sValue1= oTR1.cells[iCol].firstChild.nodeValue;
var sValue2= oTR2.cells[iCol].firstChild.nodeValue;
return sValue1.localeCompare(sValue2);
}
}
function sortTable(sTableID,iCol)
{
var oTable = document.getElementById(sTableID);
var oTBody = oTable.tBodies[0];
var colDataRows = oTBody.rows;
var aTRs = new Array;
//将所有节点加入数组，加入的只是指针
for (var i=0;i < colDataRows.length;i++ ) {
aTRs.push(colDataRows);
}
//对数组排序
aTRs.sort(generateComapreTRs(iCol));
//创建一个碎片文档，将所有的<tr/>元素添加进去，并将它们从原来的表格删除。
//最后添加的是碎片的所有字几点，并非碎片本身。
var oFragment = document.createDocumentFragment();
for (var i=0;i<aTRs.length;i++) {
oFragment.appendChild(aTRs);
}
oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
<table id="tblSort">
<thead>
<tr> <!-- 表头 -->
<th onclick="sortTable('tblSort',0)" style="cursor=pointer" > 列名 </th>
<th onclick="sortTable('tblSort',1)" style="cursor=pointer" > 列名2 </th>
</tr>
</thead>
<tbody> <!-- 表体 -->
<tr>
<td> bao zi </td>
<td> 345 </td>
</tr>
<tr>
<td> xiaozi </td>
<td> gefdgfsdf </td>
</tr>
<tr>
<td> baobao </td>
<td> zger </td>
</tr>
<tr>
<td> huanghu </td>
<td> buure </td>
</tr>
<tr>
<td> lzc </td>
<td> xcbsd </td>
</tr>
</tbody>
</table>
</body>
</html> 上一篇： [Utils]深入研究java.lang.Class类
下一篇： tomcat系统架构简介