基于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 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
Extjs入门之动态加载树代码
Apr 09 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
浅谈JS中逗号运算符的用法
Jun 12 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
利用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
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
javascript学习之json入门
2016/12/22 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
基于Python列表解析(列表推导式)
2018/06/23 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python如何使用字符打印照片
2020/01/03 Python
python绘制玫瑰的实现代码
2020/03/02 Python
Python pysnmp使用方法及代码实例
2020/08/24 Python
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
意大利运动服减价商店:ScontoSport
2020/03/10 全球购物
音乐专业自荐信
2014/02/07 职场文书
党员教师工作决心书
2014/03/13 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书