简单的表格排序

zheyiw

浏览: 999847 次
性别:
来自: 广州

最近访客更多访客>>

jklwan

devcang

weblxw

daikainan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>多列表排序</title> 
    <script type="text/javascript"> 
    //多列表排序 
function generateComapreTRs(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); 
  } 
  //对数组排序 
  aTRs.sort(generateComapreTRs(iCol)); 
   
  //创建一个碎片文档，将所有的<tr/>元素添加进去，并将它们从原来的表格删除。 
  //最后添加的是碎片的所有字几点，并非碎片本身。 
  var oFragment = document.createDocumentFragment(); 
  for (var i=0;i<aTRs.length;i++) { 
   oFragment.appendChild(aTRs); 
  } 
   
  oTBody.appendChild(oFragment); 
} 
</script> 
  </head> 
   
<body> 
<table id="tblSort"> 
  <thead> 
    <tr>  <!-- 表头     --> 
      <th onclick="sortTable('tblSort',0)" style="cursor=pointer" > 列名 </th> 
      <th onclick="sortTable('tblSort',1)" style="cursor=pointer" > 列名2 </th> 
    </tr> 
  </thead> 
  <tbody>  <!-- 表体     --> 
    <tr> 
      <td> bao zi </td> 
      <td> 345 </td> 
    </tr> 
    <tr> 
      <td> xiaozi </td> 
      <td> gefdgfsdf </td> 
    </tr> 
    <tr> 
      <td> baobao </td> 
      <td> zger </td> 
    </tr> 
    <tr> 
      <td> huanghu </td> 
      <td> buure </td> 
    </tr> 
    <tr> 
      <td> lzc </td> 
      <td> xcbsd </td> 
    </tr> 
  </tbody> 
</table> 
</body> 
</html>

分享到：