javascript 实现单击表头排序

原创 2007年09月25日 12:22:00

//author:leo

<html>
<head>
<title>sort table</title>
<script type="text/javascript">
function sortTable(tgtTable, onCol, hasHeading, asNumber, Descending, skipLastRow)
 {
 tgtTable = document.getElementById(tgtTable);
 if(!onCol) onCol=0;
 if(skipLastRow)
  skipLastRow = 1;
 else
  skipLastRow = 0;
 var i=0;
 if(hasHeading) i=1;
 var nRows = tgtTable.rows.length;
 var t, ele1, ele2;
 for(; i < nRows-1-skipLastRow; i++)
  {
  t=i;
  for(var j=i+1; j < nRows-skipLastRow; j++)
   {
   ele1 = tgtTable.rows[j].cells[onCol].innerText;
   ele2 = tgtTable.rows[t].cells[onCol].innerText;
   if(asNumber)
    {
    ele1 = parseFloat(ele1);
    ele2 = parseFloat(ele2);
    }
   if(!Descending  &&  ele1 < ele2)
    t=j;
   else if(Descending  &&  ele1 > ele2)
    t=j;
   }
  tgtTable.tBodies[0].insertBefore(tgtTable.rows[t], tgtTable.rows[i]);
  }
 }
</script>
</head>
<body>
    <form>
       <fieldset><legend></legend>
  <table id="table1" border="1">
      <tr>
       <th style="cursor:hand" onclick="sortTable('table1',0,true,'',false,false)">No</th>
       <th style="cursor:hand" onclick="sortTable('table1',1,true,'',false,false)">id</th>
       <th style="cursor:hand" onclick="sortTable('table1',2,true,'',false,false)">NAME</th>
   </tr> 
      <tr><td>1</td><td>1000</td><td>enjoy</td></tr>
    <tr><td>2</td><td>1300</td><td>mike</td></tr>
    <tr><td>3</td><td>1600</td><td>jordan</td></tr>
    <tr><td>4</td><td>1500</td><td>scofield</td></tr>
    <tr><td>5</td><td>1200</td><td>bill</td></tr>
  </table>
  </fieldset>
 </form>
</body>
</html> 

相关文章推荐

js 实现 单击表头实现表格排序

  • 2010年03月31日 11:28
  • 1KB
  • 下载

ReportStudio进阶教程(二十二) - 单击表头进行排序

这一回同样也是学习”贝克汉姆(周成)“的教程,

页面实现表头浮动+自动排序

  • 2013年03月26日 09:45
  • 11KB
  • 下载

点击表头实现排序

单击表头单元格实现排序          在DRP项目中,讲解真是详略得当。对原理性和思想像的内容(比如Servlet、filter过滤器)进行了细致的分析并用RationalRose画程序执行顺序...

jquery实现报表点击表头排序

利用参数和宏实现报表中点击表头排序功能,该方式实现的表头排序,需要进行页面刷新,实际上要重新进行报表运算。本文利用jquery和TableSort插件实现报表的客户端排序,能减轻对服务器造成的负担,也...

Asp.net中,点击GridView表头实现数据的排序

一、实现该功能的基本工作。 1、  先添加一个GridView,取名为gvData。 2、  设置该控件的属性: 操作步骤如下。 设置属性:    ...

前端笔试题笔记:在HTML中实现table表头点击升序/降序排序

题目:如下图,请实现表格信息的排序功能,当点击表头的属性区域,将表格信息进行排序切换功能,即第一次点击为降序排序,再一次点击进行升序排序。...
  • ldldong
  • ldldong
  • 2015年04月06日 12:04
  • 3983

鼠标点击html表格表头实现表格数据自定义排序

/**  * 皮锋  表格数据自定义排序,数据按int(float、string、date)进行升序或降序排列  */ // 排序 tableId: 表的id,iCol:第几列从0开始 ;dataTy...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 实现单击表头排序
举报原因:
原因补充:

(最多只允许输入30个字)