使用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 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>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>

 

 

 

 

 

 

 

 

你可能感兴趣的:(JavaScript,html)