作者:回音爱Fred | 来源:互联网 | 2018-06-19 10:56
该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个<tr>中的html,同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容,并取得<th>标签的type属性值,需要的朋友可以了解下
在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。
为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个
中的html,同时获取每个 标签下对应获取到的列号的标签中的内容,并取得 标签的type属性值,将获取 的html、的内容和 的type属性值拼接成字符串添加到数组array中,然后将表格 中的html全部置空,根据type属性值的不同采用不同的方法对的内容进行比较,根据比较结果对数组array进行排序,然后将排序后的数组元素重新赋值给已经置空的 。如果已经对该列排序过了,则直接对数组进行倒置。提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用Javascript的localeCompare方法,该方法支持汉字字符串的排序,遗憾的是该方法不兼容谷歌浏览器。所以在谷歌浏览器上汉字字符串的排序结果会不正确。 HTML代码清单 : 代码如下:
View Code
序号 书名 价格(元) 出版时间 印刷量(册) IP 1 狼图腾 29.80 2009-10 50000 192.168.1.125 2 孝心不能等待 29.80 2009-09 800 192.68.1.125 3 藏地密码2 28.00 2008-10 192.102.0.12 4 藏地密码1 24.80 2008-10 215.34.126.10 5 设计模式之禅 69.00 2011-12 192.168.1.5 6 轻量级 Java EE 企业应用实战 99.00 2012-04 5000 192.358.1.125 7 Java 开发实战经典 79.80 2012-01 2000 192.168.1.25 8 Java Web 开发实战经典 69.80 2011-11 2500 215.168.54.125
tableSort.js代码清单: 代码如下:
View Code $(document).ready(function(){ var tableObject = $('#tableSort');//获取id为tableSort的table对象 var tbHead = tableObject.children('thead');//获取table对象下的thead var tbHeadTh = tbHead.find('tr th');//获取thead下的tr下的th var tbBody = tableObject.children('tbody');//获取table对象下的tbody var tbBodyTr = tbBody.find('tr');//获取tbody下的tr var sortIndex = -1; tbHeadTh.each(function() {//遍历thead的tr下的th var thisIndex = tbHeadTh.index($(this));//获取th所在的列号 $(this).mouseover(function(){ tbBodyTr.each(function(){//编列tbody下的tr var tds = $(this).find("td");//获取列号为参数index的td对象集合 $(tds[thisIndex]).addClass("hover"); }); }).mouseout(function(){ tbBodyTr.each(function(){ var tds = $(this).find("td"); $(tds[thisIndex]).removeClass("hover"); }); }); $(this).click(function() { var dataType = $(this).attr("type"); checkColumnValue(thisIndex, dataType); }); }); $("tbody tr").removeClass();//先移除tbody下tr的所有css类 $("tbody tr").mouseover(function(){ $(this).addClass("hover"); }).mouseout(function(){ $(this).removeClass("hover"); }); //对表格排序 function checkColumnValue(index, type) { var trsValue = new Array(); tbBodyTr.each(function() { var tds = $(this).find('td'); trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html()); $(this).html(""); }); var len = trsValue.length; if(index == sortIndex){ trsValue.reverse(); } else { for(var i = 0; i type = trsValue[i].split(".separator")[0]; for(var j = i + 1; j value1 = trsValue[i].split(".separator")[1]; value2 = trsValue[j].split(".separator")[1]; if(type == "number"){ value1 = value1 == "" ? 0 : value1; value2 = value2 == "" ? 0 : value2; if(parseFloat(value1) > parseFloat(value2)){ var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } else if(type == "ip"){ if(ip2int(value1) > ip2int(value2)){ var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } else { if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器 var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } } } } for(var i = 0; i $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); } sortIndex = index; } //IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); return num; } })
运行结果: 特别感谢网友“夏の寒风”,在Jquery的相关操作上要是没有“夏の寒风”的帮忙肯定很难完成。对这个效果自己还是很满意的,只是在实现的操作上拼接字符串,截取字符串的过程有些繁琐,不够简单明了,还有待改进。
推荐阅读
本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ...
[详细]
蜡笔小新 2023-12-14 15:52:03
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
本文介绍了解决IE678伪类不兼容问题的方法,包括少用CSS3和HTML5独有的属性,使用CSS hacker,使用last-child清除浮动、批量添加标签、去掉list item最后一个的border-right等技巧。同时还介绍了使用after清除浮动时加上IE独有属性zoom:1的处理方法。另外,本文还提到可以使用jQuery代替批量添加标签的功能,以及使用负边距和CSS2选择器element+element去掉list item最后一个的border-right的方法。 ...
[详细]
蜡笔小新 2023-12-13 10:50:43
本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ...
[详细]
蜡笔小新 2023-12-11 12:06:41
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ...
[详细]
蜡笔小新 2023-12-09 17:40:33
本文介绍了获取ul中第一个li元素的五种方法和多个ul中第一个li元素的四种方法,包括使用jQuery的选择器和遍历方法。通过这些方法,可以方便地获取到所需的元素,并进行相应的操作。 ...
[详细]
蜡笔小新 2023-12-09 10:26:04
本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ...
[详细]
蜡笔小新 2023-12-09 09:17:00
web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ...
[详细]
蜡笔小新 2023-10-17 20:40:03
2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ...
[详细]
蜡笔小新 2023-10-17 19:54:54
前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ...
[详细]
蜡笔小新 2023-10-17 17:47:27
:nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。然后,我写了如下h ...
[详细]
蜡笔小新 2023-10-17 17:10:18
本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ...
[详细]
蜡笔小新 2023-10-17 13:38:49
项目需要实现弹幕,网上参考了各种方法,最后觉得transform+transition实现的效果在移动设备上性能最好,在iphone6和红米4上测试,看不到 ...
[详细]
蜡笔小新 2023-10-17 12:33:46