欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

简单的表格排序 HTML 

程序员文章站 2022-04-03 10:01:06
...
<!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>
相关标签： HTML

上一篇： 动态表格例子2  

下一篇： EXT_grid_rowclick_jsonStore EXTJSP框架HTML 

推荐阅读