基于jQuery实现表格的排序


Posted in Javascript onDecember 02, 2016
$(function(){
 //存入点击列的每一个TD的内容;
 var aTdCont = [];

 //点击列的索引值
 var thi = 0
 
 //重新对TR进行排序
 var setTrIndex = function(tdIndex){
  for(i=0;i<aTdCont.length;i++){
   var trCont = aTdCont[i];
   $("tbody tr").each(function() {
    var thisText = $(this).children("td:eq("+tdIndex+")").text();
    if(thisText == trCont){
     $("tbody").append($(this));
    }
    });  
  }
 } 
 //比较函数的参数函数
 var compare_down = function(a,b){
   return a-b;
 } 
 var compare_up = function(a,b){
   return b-a;
 } 
 //比较函数
 var fSort = function(compare){
  aTdCont.sort(compare);
 }
 //取出TD的值,并存入数组,取出前二个TD值;
 var fSetTdCont = function(thIndex){
   $("tbody tr").each(function() {
    var tdCont = $(this).children("td:eq("+thIndex+")").text();
    aTdCont.push(tdCont);
   });
 }
 //点击时需要执行的函数
 var clickFun = function(thindex){
  aTdCont = [];
  //获取点击当前列的索引值
  var nThCount = thindex;
  //调用sortTh函数 取出要比较的数据
  fSetTdCont(nThCount);
 } 
 //点击事件绑定函数
 $("th").toggle(function(){
  thi= $(this).index();
  clickFun(thi);
  //调用比较函数,降序
  fSort(compare_up);
  //重新排序行
  setTrIndex(thi);
 },function(){
  clickFun(thi);
  //调用比较函数 升序
  fSort(compare_down);
  //重新排序行
  setTrIndex(thi);
 }) 
})

主要思路:

因为JS有SORT的方法,对数组进行排序,那么通过个方法,我们就会想到数组了。

1.点标表格标头的时候,取出点击的是那一列。即列的索引值。因为下面要进行排序的就是该列。所以我要知道是点的那一列。

2.对表格的数据部分,也就是tbody部分,进行点击的列的取值,把这些值存入到一个数组当中。

3.将存入数据的数组,通过SORT方法进行排序。(这里写了两种,升,或降,因为是点击时要切换排序的方式。第一次降,第二次升,第三降,第四升,依次进行)

4.将排序好的数组的值进行遍历,在遍历过程中,和每一行TR的点击列的那个TD当中的数据进行一个比较。如果相等,就插入到tbody的最后去.(最先插入的,将是在第一行。)

以上就是本文的全部内容,希望对大家有所帮助,谢谢对三水点靠木的支持!

Javascript 相关文章推荐
JS的递增/递减运算符和带操作的赋值运算符的等价式
Dec 08 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
Mar 12 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
浅析vue-router原理
Oct 19 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 #Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 #Javascript
基于javascript实现的快速排序
Dec 02 #Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 #Javascript
基于jQuery实现滚动切换效果
Dec 02 #Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python查询IP地址归属完整代码
2017/06/21 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
银行毕业实习自我鉴定
2013/09/19 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
捐书倡议书
2014/08/29 职场文书
党的生日演讲稿
2014/09/10 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书