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实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
详谈js模块化规范
Jul 07 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
PHP下escape解码函数的实现方法
2010/08/08 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
Python循环语句之break与continue的用法
2015/10/14 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python2包含中文报错的解决方法
2018/07/09 Python
使用python实现滑动验证码功能
2019/08/05 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
专科文秘应届生求职信
2013/11/18 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python