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 相关文章推荐
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 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
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
Firefox window.close()的使用注意事项
2009/04/11 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
vuex入门最详细整理
2020/03/04 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python贪心算法实例小结
2018/04/22 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
.NET程序员的数据库面试题
2012/10/10 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers