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> 

点击表头实现排序

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

jquery实现报表点击表头排序

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

QTableWidget 点击标题栏 设置排序

需求:统计场景中模型信息,方便查看模型 要求: 1.统计信息包括:包围球中心点、半径信息;模型的几何个数、图元个数、顶点个数、三角面个数、纹理格式、纹理个数、纹理大小等 2.对信息数...
  • u012519333
  • u012519333
  • 2016年08月19日 00:11
  • 806

使用listview绘制表格,实现双击表头排序

Android使用listview绘制表格,并实现双击表头排序
  • chenyong4514
  • chenyong4514
  • 2015年09月21日 12:19
  • 424

HTML中单击Table表头实现排序

本代码基于jquery,如下:
  • bingleiyuren
  • bingleiyuren
  • 2014年05月07日 18:45
  • 1433

AngularJS过滤器应用之表头排序

需求解释:表头排序指的是使用列表方式显示数据时,如果用户单击列表中某列头部元素,那么列表中的全部数据将会自动按该列表的属性值自动排序,默认为升序,再次单击为降序;案例如下: 先贴代码: ...
  • xyphf
  • xyphf
  • 2016年11月14日 17:23
  • 1620

bootstrap点击表头实现排序功能

bootstrap点击表头实现排序功能
  • Hero_QHZ
  • Hero_QHZ
  • 2017年07月27日 14:00
  • 2204

QT中QTableView 点击表头进行排序

今日,由于工作需要,要实现在QTableView中点击表头进行排序的功能,但QTableView中并未提供此功能,经过苦苦的网络搜索也为发现可用的代码。最后经过跟踪QTableWidget的排序功能实...
  • lacoucou
  • lacoucou
  • 2017年03月11日 14:40
  • 3100

根据Extjs中grid列表表头自动排序导出数据的实例

在上个项目中,
  • Leonardo9029
  • Leonardo9029
  • 2014年11月15日 10:55
  • 1725

html表格table的表头排序,js代码fastunit使用案例

页面效果:        下面是这个页面的HTML源码,实例的下载地址是:http://download.csdn.net/download/asiaasia666/8449215 ...
  • asiaasia666
  • asiaasia666
  • 2015年02月16日 13:28
  • 516
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 实现单击表头排序
举报原因:
原因补充:

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