js表格排序

dickyzhu

浏览: 111777 次
性别:
来自: 武汉

最近访客更多访客>>

小泽啊

卢先鹏

nangehao

Jasonwang901014

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (98)

社区版块

存档分类

HTML

对单列表格排列

<html>
<head>
<title>table sort</title>
<script type="text/javascript">
var bFlag = true;
function compareTRs(oTR1,oTR2){
	var sValue1 = oTR1.cells[0].firstChild.nodeValue;
	var sValue2 = oTR2.cells[0].firstChild.nodeValue;
	return sValue1.localeCompare(sValue2);
}
function sortTable(sTableID){
	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[i]);
	aTRs.sort(compareTRs);
	bFlag = !bFlag;
	if(bFlag)
		aTRs.reverse();

	var oFragment = document.createDocumentFragment();
	for(var i = 0;i<aTRs.length;i++)
		oFragment.appendChild(aTRs[i]);
	oTBody.appendChild(oFragment);
}
</script>
</head>
<body>
<table border="1" id ="tblSort">
<thead>
	<tr><th onclick="sortTable('tblSort')" style="cursor:pointer">Last Name</th></tr>
</thead>
<tbody>
	<tr><td>Smith</td></tr>
	<tr><td>Johnson</td></tr>
	<tr><td>Headerson</td></tr>
	<tr><td>Williams</td></tr>
	<tr><td>Gillams</td></tr>
	<tr><td>Walker</td></tr>
</tbody>
</table>
</body>
</html>

对多列表格排序：

<html>
<head>
<title>mutiple table sorting</title>
<script type="text/javascript">
function generateCompareTRs(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[i]);
	if(oTable.sortCol ==iCol)
		aTRs.reverse();
	else
		aTRs.sort(generateCompareTRs(iCol));

	var oFragment = document.createDocumentFragment();
	for(var i = 0;i<aTRs.length;i++)
		oFragment.appendChild(aTRs[i]);
	oTBody.appendChild(oFragment);
	oTable.sortCol = iCol;
}
</script>
<table id="tblSort" border="1">
<tHead>
	<tr><th onclick="sortTable('tblSort',0)" style="cursor:pointer">Last Name</th><th onclick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th></tr>
</tHead>
<tBody>
	<tr><td>Smith</td><td>John</td></tr>
	<tr><td>Johnson</td><td>Betty</td></tr>
	<tr><td>Hendreson</td><td>Nathan</td></tr>
	<tr><td>Wilianms</td><td>James</td></tr>
	<tr><td>Gilliam</td><td>Micheal</td></tr>
	<tr><td>Walker</td><td>Mathrew</td></tr>
</tBody>
</table>
</head>
</html>

分享到：