js实现表格字段排序


Posted in Javascript onFebruary 19, 2014

1.比较函数生成器:

/**
 * 比较函数生成器
 * 
 * @param iCol
 *            数据行数
 * @param sDataType
 *            该行的数据类型
 * @return
 */
function  generateCompareTRs(iCol, sDataType) {
     return   function  compareTRs(oTR1, oTR2) {
        vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
        vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);
         if  (vValue1 < vValue2) {
             return  -1;
        }  else   if  (vValue1 > vValue2) {
             return  1;
        }  else  {
             return  0;
        }
    };
}

2.处理比较字符类型:
/**
 * 处理排序的字段类型
 * 
 * @param sValue
 *            字段值 默认为字符类型即比较ASCII码
 * @param sDataType
 *            字段类型 对于date只支持格式为mm/dd/yyyy或mmmm dd,yyyy(January 12,2004)
 * @return
 */
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();
    }
}

3.主函数:
/**
 * 通过表头对表列进行排序
 * 
 * @param sTableID
 *            要处理的表ID<table id=''>
 * @param iCol
 *            字段列id eg: 0 1 2 3 ...
 * @param sDataType
 *            该字段数据类型 int,float,date 缺省情况下当字符串处理
 */
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];
    }
     if  (oTable.sortCol == iCol) {
        aTRs.reverse();
    }  else  {
        aTRs.sort(generateCompareTRs(iCol, sDataType));
    }
     var  oFragment = document.createDocumentFragment();
     for  (  var  j = 0; j < aTRs.length; j++) {
        oFragment.appendChild(aTRs[j]);
    }
    oTBody.appendChild(oFragment);
    oTable.sortCol = iCol;
}

将以上问代码封装到一个js文件中,在html页面中引用。

测试test.html:

< html   xmlns = "http://www.w3.org/1999/xhtml" >
< title > 表列排序 </ title >
< script   type = "text/javascript"   src = "js/sortTable.js" > </ script >
< body >
< table   border = "1"   id = "tblSort" >
     < thead   style = "color: red; bgcolor: blank" >
         < tr >
             < th   onclick = " sortTable('tblSort',0);"   style = "cursor: pointer" > LastName </ th >
             < th   onclick = " sortTable('tblSort',1,'int');"   style = "cursor: pointer" > Number </ th >
             < th   onclick = " sortTable('tblSort',2,'date');"   style = "cursor: pointer" > Date </ th >
         </ tr >
     </ thead >
     < tbody >
         < tr >
             < td > A </ td >
             < td > 1 </ td >
             < td > 5/9/2008 </ td >
         </ tr >
         < tr >
             < td > B </ td >
             < td > 3 </ td >
             < td > 6/9/2008 </ td >
         </ tr >
         < tr >
             < td > D </ td >
             < td > 6 </ td >
             < td > 5/4/2008 </ td >
         </ tr >
         < tr >
             < td > E </ td >
             < td > -5 </ td >
             < td > 5/4/2007 </ td >
         </ tr >
         < tr >
             < td > H </ td >
             < td > 34 </ td >
             < td > 5/8/2008 </ td >
         </ tr >
         < tr >
             < td > C </ td >
             < td > 12 </ td >
             < td > 1/4/2018 </ td >
         </ tr >
     </ tbody >
</ table >
</ body >
</ html >
Javascript 相关文章推荐
jquery multiSelect 多选下拉框
Jul 09 Javascript
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
js获取判断上传文件后缀名的示例代码
Feb 19 #Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 #Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 #Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 #Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 #Javascript
JS执行删除前的判断代码
Feb 18 #Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 #Javascript
You might like
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
js简单抽奖代码
2015/01/16 Javascript
javascript实现支持移动设备画廊
2015/08/24 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue实现前端列表多条件筛选
2020/10/26 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python 实现客户端与服务端的通信
2020/12/23 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
数据库专业英语
2012/11/30 面试题
法人任命书范本
2014/06/04 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
毕业生评语大全
2015/01/04 职场文书
小学教育见习总结
2015/06/23 职场文书
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL