javascript操作表格排序实例分析
本文实例讲述了javascript操作表格排序的方法。分享给大家供大家参考。具体如下：
完整例子如下：
<html>
<head>
<title>TableSortExample</title>
<scripttype="text/javascript">
//转换器，将列的字段类型转换为可以排序的类型：String,int,float
functionconvert(sValue,sDataType){
switch(sDataType){
case"int":
returnparseInt(sValue);
case"float":
returnparseFloat(sValue);
case"date":
returnnewDate(Date.parse(sValue));
default:
returnsValue.toString();
}
}
//排序函数产生器，iCol表示列索引，sDataType表示该列的数据类型
functiongenerateCompareTRs(iCol,sDataType){
returnfunctioncompareTRs(oTR1,oTR2){
varvValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
varvValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
if(vValue1<vValue2){
return-1;
}elseif(vValue1>vValue2){
return1;
}else{
return0;
}
};
}
//排序方法
functionsortTable(sTableID,iCol,sDataType){
varoTable=document.getElementById(sTableID);
varoTBody=oTable.tBodies[0];
varcolDataRows=oTBody.rows;
varaTRs=newArray;
//将所有列放入数组
for(vari=0;i<colDataRows.length;i++){
aTRs[i]=colDataRows[i];
}
//判断最后一次排序的列是否与现在要进行排序的列相同，
//是的话，直接使用reverse()逆序
if(oTable.sortCol==iCol){
aTRs.reverse();
}else{
//使用数组的sort方法，传进排序函数
aTRs.sort(generateCompareTRs(iCol,sDataType));
}
varoFragment=document.createDocumentFragment();
for(vari=0;i<aTRs.length;i++){
oFragment.appendChild(aTRs[i]);
}
oTBody.appendChild(oFragment);
//记录最后一次排序的列索引
oTable.sortCol=iCol;
}
</script>
</head>
<body>
<p>Clickonthetableheadertosortinascendingorder.</p>
<tableborder="1"id="tblSort">
<thead>
<tr>
<thonclick="sortTable('tblSort',0)"
style="cursor:pointer">LastName</th>
<thonclick="sortTable('tblSort',1)"
style="cursor:pointer">FirstName</th>
<thonclick="sortTable('tblSort',2,'date')"
style="cursor:pointer">Birthday</th>
<thonclick="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>Johnson</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程序设计有所帮助。