您的位置：首页 > Web前端 > JavaScript

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

2007-12-07 12:03 716 查看

<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" onclick="JavaScript:sortTable('tbPerson',0)">
<b>武将</b>
</td>
<td style="width: 274px" onclick="JavaScript:sortTable('tbPerson',1,'int')">
<b>武力</b></td>
<td style="width: 274px" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航