• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 基于jquery的表格排序

基于jquery的表格排序

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了表格排序等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
很多高手也位jquery写了专门的排序库,因为自己也想尝试一下,
当然运行速度实在不能接受,但是我会慢慢的把他改进的。
注:这里只是拿出了一部分代码来,查看演示demo
文档载入后给'th'添加click事件。
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr('dataType');
找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,也可以用ID或者class来定义,但是我觉得这样直观点在Transitional模式下也可以正常解读.
2.
var index=$('th').index(this)+1;
找到被点击对象在文档中的位置加上1,加1是为了给所对应的列的td添加样式才做的。
因为用:eq()只能得到td的全文档位置,而用:nth-child()的话得到的是每个td在自己的父元素里面的序列位置。
3.
var row=$('tbody tr');
将tbody里所有tr存到变量row.
4.
$.each(row,function(i){ arr[i]=row[i] })
遍历所有行讲它插入arr数组.

5.if($(this).hasClass('select')){arr.reverse()}
如果这个'th'被点击过那么它将会被添加select样式,如果是这样直接将原来的arr数组反向。
6.
else {
arr.sort(sortStr(index,dataType))
$('.select').removeClass();
$('td:nth-child('+index+')').addClass('select');
$(this).addClass('select')
}
否则,将arr用sort()方法进行排序sort()方式可以接受1个函数,这个函数接受2个参数作为需要比较的数据,我在这里定义为
sortStr();
它有两个参数:
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-08-16jquery.simple.tree插件 更简单,兼容性更好的无限树插件
  • 2017-08-16jquery ajax跨域解决方法(json方式)
  • 2017-08-16浅析JQuery获取和设置Select选项的常用方法总结
  • 2017-08-16基于jquery自定义图片热区效果
  • 2017-08-16jquery禁止输入数字以外的字符的示例(纯数字验证码)
  • 2017-08-16jquery自定义属性(类型/属性值)
  • 2017-08-16jQuery 性能优化指南(2)
  • 2017-08-16jquery中.add()的使用分析
  • 2017-08-16jquery弹出关闭遮罩层实例
  • 2017-08-16浅谈struts1 & jquery form 文件异步上传

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery text()方法取标签中的文本
    • jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
    • BootStrap table表格插件自适应固定表头(超好用)
    • $.each遍历对象、数组的属性值并进行处理
    • jQuery实现Select下拉列表进行状态选择功能
    • 基于jquery animate操作css样式属性小结
    • jQuery Password Validation密码验证
    • easyui combotree加载静态数据问题(选不上)解决方法
    • jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
    • jquery实现自适应banner焦点图

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有