使用Javascript对表格进行排序（摘自Javascript高级程序设计）
2007-08-20 20:21
676 查看
// sortTable.js 文件
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
break;
case "float":
return parseFloat(sValue);
break;
case "date":
return new Date(Date.parse(sValue));
break;
default:
return sValue.toString();
}
}
function generateCompareTrs(iCol,sDataType)
{
return function compareTrs(oTr1,oTr2)
{
var vValue1 = convert(oTr1.cells[iCol].firstChild.nodeValue,sDataType);
var 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();
for(var i = 0;i<colDataRows.length;i++)
{
aTrs.push(colDataRows[i]);
}
if(oTable.sortCol == iCol)
{
aTrs.reverse();
}
else
{
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;
}
//The end
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="sortTable.js"></script>
</head>
<body>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',0)" style="cursor:pointer ">Last Name</th>
<th onclick="sortTable('tblSort',1)" style="cursor:pointer ">First Name</th>
<th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer ">Birthday</th>
<th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer ">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Sjohnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
function convert(sValue,sDataType)
{
switch(sDataType)
{
case "int":
return parseInt(sValue);
break;
case "float":
return parseFloat(sValue);
break;
case "date":
return new Date(Date.parse(sValue));
break;
default:
return sValue.toString();
}
}
function generateCompareTrs(iCol,sDataType)
{
return function compareTrs(oTr1,oTr2)
{
var vValue1 = convert(oTr1.cells[iCol].firstChild.nodeValue,sDataType);
var 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();
for(var i = 0;i<colDataRows.length;i++)
{
aTrs.push(colDataRows[i]);
}
if(oTable.sortCol == iCol)
{
aTrs.reverse();
}
else
{
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;
}
//The end
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="sortTable.js"></script>
</head>
<body>
<table border="1" id="tblSort">
<thead>
<tr>
<th onclick="sortTable('tblSort',0)" style="cursor:pointer ">Last Name</th>
<th onclick="sortTable('tblSort',1)" style="cursor:pointer ">First Name</th>
<th onclick="sortTable('tblSort',2,'date')" style="cursor:pointer ">Birthday</th>
<th onclick="sortTable('tblSort',3,'int')" style="cursor:pointer ">Siblings</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>7/12/1978</td>
<td>2</td>
</tr>
<tr>
<td>Sjohnson</td>
<td>Betty</td>
<td>10/15/1977</td>
<td>4</td>
</tr>
<tr>
<td>Henderson</td>
<td>Nathan</td>
<td>2/25/1949</td>
<td>1</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
<td>7/8/1980</td>
<td>4</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
<td>7/22/1949</td>
<td>1</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
<td>1/14/2000</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript高级程序设计 阅读笔记（十九） js表格排序
- 使用javascript进行表格排序
- 使用javascript对客户端表格（单列）进行排序
- [Javascript 高级程序设计]学习心得记录3 根据对象数组的属性进行排序
- JavaScript高级程序设计 阅读笔记（十九） js表格排序
- JavaScript高级程序设计(第2章 在HTML中使用JavaScript)
- 在HTML中使用JavaScript（总结自JavaScript高级程序设计）
- JavaScript高级程序设计(四): 关键字With的使用
- 对javascript表格中的元素进行排序(正序和倒序)
- JavaScript执行环境及作用域链(摘自JavaScript高级程序设计第三版第4.2节)
- JavaScript高级程序设计第15章（使用Canvas）
- 2. javacript高级程序设计-在HTML中使用JavaScript
- JavaScript高级程序设计学习笔记一在HTML中使用JS
- 【JavaScript高级程序设计】--第2章 在HTML中使用JavaScript
- JavaScript 使用 sort() 方法从数值上对数组进行排序
- 使用javascript对表格进行动态修改
- 【javascript】根据表格中的某一列进行排序
- JavaScript高级程序设计之数值数组排序
- JavaScript高级程序设计之DOM之DOM 操作技术之操作表格第10.2.3讲
- JavaScript高级程序设计之面向对象的程序设计之创建对象之组合使用构造函数模式和原型模式 第6.2.4讲笔记