js表格排序实例分析(支持int,float,date,string四种数据类型)


Posted in Javascript onMay 06, 2015

本文实例讲述了js表格排序的方法。分享给大家供大家参考。具体如下:

<html>
<head>
<title>SortTable2</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var k=0;
/**//**************************************************************************
排序的主方法,有三个形参,STableTd,iCol,sDataType分别为需要排序的表格ID,
需要排序的表格列号,所在列的数据类型(支持int,float,date,string四种数据类型)
**************************************************************************/
function sortTable(sTableId,iCol,sDataType)
{
  var oTable=document.getElementById(sTableId);//获取表格的ID 
  var oTbody=oTable.tBodies[0]; //获取表格的tbody
  var colDataRows=oTbody.rows; //获取tbody里的所有行的引用

  var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
  for(var i=0;i<colDataRows.length;i++) //依次把所有行放如aTRs数组
  {
    aTRs.push(colDataRows[i]);
  }
  /**//***********************************************************************
  sortCol属性是额外给table添加的属性,用于作顺反两种顺序排序时的判断,区分
  首次排序和后面的有序反转
  ************************************************************************/
  if(oTable.sortCol==iCol) //非首次排序
  {
    aTRs.reverse();
  }
  else  //首次排序
  {
    if(k%2==0) //升序
    {
      aTRs.sort(generateCompareTRs(iCol,sDataType));
    }
    else if(k%2==1) //降序
    {
      aTRs.sort(generateCompareTRs1(iCol,sDataType));
    }
  }
  var oFragment=document.createDocumentFragment();  //创建文档碎片
  for(var i=0;i<aTRs.length;i++)  //把排序过的aTRs数组成员依次添加到文档碎片
  {
    oFragment.appendChild(aTRs[i]);
  }
  oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新 
  oTable.sortCol=iCol;  //把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
};

//比较函数,用于两项之间的排序
//升序
function generateCompareTRs(iCol,sDataType)
{
  return  function compareTRs(oTR1,oTR2)
  {
    var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
    var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
    if(vValue1<vValue2)
    {
      return -1;
    }
    else if(vValue1>vValue2)
    {
      return 1;
    }
    else
    {
      return 0;
    }
  };
};
//降序
function generateCompareTRs1(iCol,sDataType)
{
  return  function compareTRs(oTR1,oTR2)
  {
    var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
    var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
    if(vValue1>vValue2)
    {
      return -1;
    }
    else if(vValue1<vValue2)
    {
      return 1;
    }
    else
    {
      return 0;
    }
  };
};
//数据类型转换函数
function convert(sValue,sDataType)
{
  switch(sDataType)
  {
    case "int":return parseInt(sValue);
    case "float": return parseFloat(sValue);
    case "date":return new Date(Date.parse(sValue));
    default:return sValue.toString();
  }
};
</script>
</head>
<body>
<form name="f1" id="f1" action="" method="post">
<table border="1" id="tblSort" sortCol="-1">
<thead>
 <tr>
  <th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th>
  <th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
  <th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
  <th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th>
 </tr>
</thead>
<tbody>
 <tr>
  <td>Simth</td>
  <td>John</td>
  <td>7/12/1978</td>
  <td>50nGy/h</td>
 </tr>
 <tr>
  <td>Johnson</td>
  <td>Betty</td>
  <td>5/12/1965</td>
  <td>20nGy/h</td>
 </tr>
 <tr>
  <td>Henderson</td>
  <td>Nathan</td>
  <td>10/15/1977</td>
  <td>130nGy/h</td>
 </tr>
 <tr>
  <td>Willianms</td>
  <td>James</td>
  <td>2/25/1949</td>
  <td>10nGy/h</td>
 </tr>
 <tr>
  <td>Gilliam</td>
  <td>Michael</td>
  <td>7/8/1980</td>
  <td>140nGy/h</td>
 </tr>
 <tr>
  <td>Walker</td>
  <td>Matthew</td>
  <td>6/18/1981</td>
  <td>103nGy/h</td>
 </tr>
</tbody>   
</table>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
详解JS中的attribute属性
Apr 25 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
vue增删改查的简单操作
Jul 15 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
js实现漂浮回顶部按钮实例
May 06 #Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 #Javascript
js中日期的加减法
May 06 #Javascript
javascript实现回到顶部特效
May 06 #Javascript
javascript实现完美拖拽效果
May 06 #Javascript
avalonjs实现仿微博的图片拖动特效
May 06 #Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript面向对象编程
2008/03/02 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python基础知识_浅谈用户交互
2017/05/31 Python
遗传算法之Python实现代码
2017/10/10 Python
Python制作词云的方法
2018/01/03 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
申请任职学生会干部自荐书范文
2014/02/13 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
买房协议书
2014/04/11 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
农业项目合作意向书
2015/05/08 职场文书
工程款催款函
2015/06/24 职场文书
丧事主持词
2015/07/02 职场文书
趣味运动会加油词
2015/07/18 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP