基于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 相关文章推荐
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
利用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代码
2011/11/27 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
浅析js实现网页截图的两种方式
2019/11/01 Javascript
mustache.js实现首页元件动态渲染的示例代码
2020/12/28 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python collections模块的使用方法
2020/10/09 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
好的自荐信的要求
2013/10/30 职场文书
婚前协议书怎么写
2014/04/15 职场文书
2014年党课学习材料
2014/05/11 职场文书
关于运动会的口号
2014/06/07 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
庆祝教师节标语
2014/10/09 职场文书
新教师教学工作总结
2015/08/12 职场文书
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸