javascript操作表格排序实例分析


Posted in Javascript onMay 06, 2015

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

完整例子如下:

<html>
 <head>
 <title>Table Sort Example</title>
 <script type="text/javascript">
 //转换器,将列的字段类型转换为可以排序的类型:String,int,float
  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();
  }
  }
  //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
  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 sortTable(sTableID, iCol, sDataType) {
  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[i] = colDataRows[i];
  }
  //判断最后一次排序的列是否与现在要进行排序的列相同,
  //是的话,直接使用reverse()逆序
  if (oTable.sortCol == iCol) {
   aTRs.reverse();
  } else {
   //使用数组的sort方法,传进排序函数
   aTRs.sort(generateCompareTRs(iCol, sDataType));
  }
  var oFragment = document.createDocumentFragment();
  for (var i=0; i < aTRs.length; i++) {
   oFragment.appendChild(aTRs[i]);
  }
  oTBody.appendChild(oFragment);
  //记录最后一次排序的列索引
  oTable.sortCol = iCol;
  }
 </script>
 </head>
 <body>
 <p>Click on the table header to sort in ascending order.</p>
 <table border="1" id="tblSort">
  <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">Siblings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td>Smith</td>
   <td>John</td>
   <td>7/12/1978</td>
   <td>2</td>
  </tr>
  <tr>
   <td>Johnson</td>
   <td>Betty</td>
   <td>10/15/1977</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Henderson</td>
   <td>Nathan</td>
   <td>2/25/1949</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Williams</td>
   <td>James</td>
   <td>7/8/1980</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Gilliam</td>
   <td>Michael</td>
   <td>7/22/1949</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Walker</td>
   <td>Matthew</td>
   <td>1/14/2000</td>
   <td>3</td>
  </tr>
  </tbody>
 </table> 
 </body>
</html>

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

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
JS交换变量的方法
Jan 21 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
比较node.js和Deno
Apr 27 Javascript
js获取form的方法
May 06 #Javascript
js给selected添加options的方法
May 06 #Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 #Javascript
js实现漂浮回顶部按钮实例
May 06 #Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 #Javascript
js中日期的加减法
May 06 #Javascript
javascript实现回到顶部特效
May 06 #Javascript
You might like
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
2014/05/07 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python实现傅里叶级数展开的实现
2018/07/21 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
Python和Sublime整合过程图示
2019/12/25 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
浪费资源的建议书
2014/03/12 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
学校端午节活动总结
2015/02/11 职场文书
英语辞职信范文
2015/02/28 职场文书
反邪教观后感
2015/06/11 职场文书
高中生物教学反思
2016/02/20 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
JS ES6异步解决方案
2021/04/29 Javascript