使用Javascript根据table中的列值进行排序

 使用Javascript根据table中的列值进行排序,示例代码如下

 

 

 

<html>
<head>
<script>
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[i]= 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></head>
<body >

<table  border="1" id="tblSort">
<thead>
<tr>
<th οnclick="sortTable('tblSort',0)" style="cursor:pointer"> Last Name</th>
<th οnclick="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>Henderson</td>
<td>Nathan</td>
</tr>
<tr>
<td>Williams</td>
<td>James</td>
</tr>
<tr>
<td>Gilliam</td>
<td>Michael</td>
</tr>
<tr>
<td>Walker</td>
<td>Matthew</td>
</tr>

</tbody>

</table>
</body>
</html>

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值