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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
Vue实现日历小插件
Jun 26 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
Vue Element plus使用方法梳理
Dec 24 Vue.js
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
php xml文件操作实现代码(二)
2009/03/20 PHP
php smarty模版引擎中的缓存应用
2009/12/11 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
jquery等待效果示例
2014/05/01 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
详解React 元素渲染
2020/07/07 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python+mysql实现教务管理系统
2019/02/20 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
python3中数组逆序输出方法
2020/12/01 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
extern是什么意思
2016/03/10 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
学习之星事迹材料
2014/05/17 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
西柏坡导游词
2015/02/05 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server