为了正常的体验网站,请在浏览器设置里面开启Javascript功能!
首页 > Jquery 选中表格一列并对表格排序实现原理

Jquery 选中表格一列并对表格排序实现原理

2018-08-05 9页 doc 36KB 10阅读

用户头像

is_477730

暂无简介

举报
Jquery 选中表格一列并对表格排序实现原理Jquery 选中表格一列并对表格排序实现原理 选中表格一列并对表格排序实现原理该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个 tr 中的html,同时获取每个 tr 标签下对应获取到的列号的 td 标签中的内容,并取得 th 标签的type属 性值,需要的朋友可以了解下 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。 为了更好的理解在前端对表格进行排序的...
Jquery 选中表格一列并对表格排序实现原理
Jquery 选中表格一列并对表格排序实现原理 选中表格一列并对表格排序实现原理该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个 tr 中的html,同时获取每个 tr 标签下对应获取到的列号的 td 标签中的内容,并取得 th 标签的type属 性值,需要的朋友可以了解下 在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。 为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个 tr 中的html,同时获取每个 tr 标签下对应获取到的列号的 td 标签中的内容,并取得 th 标签的type属性值,将获取 tr 的html、 td 的内容和 th 的type属性值拼接成字符串添加到数组array中,然后将表格 tr 中的html全部置空,根据type属性值的不同采用不同的方法对 td 的内容进行比较,根据比较结果对数组array进行排序,然后将排序后的数组元素重新赋值给已经置空的 tr 。如果已经对该列排序过了,则直接对数组进行倒置。提供数值、字符串以及IP地址三种类型的排序规则。字符串类型排序规则采用 javascript的localeCompare方法,该方法支持汉字字符串的排序,遗憾的是该方法不兼容谷歌浏览器。所以在谷歌浏览器上汉字字符串的排序结果会不正确。 HTML代码清单: 复制代码 代码如下: View Code !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "; html head title 表格排序 /title meta name="Generator" content="EditPlus" meta name="Author" content="tschengbin" meta name="Keywords" content="jquery tableSort" meta name="Description" content="" script type="text/javascript" src="jquery-1.8.3.min.js" /script script type="text/javascript" src="tableSort.js" /script style type="text/css" div{ width: 1024px; margin: 0 auto;/*div相对屏幕左右居中*/ } table{ border: solid 1px #666; border-collapse: collapse; width: 100%; cursor: default; } tr{ border: solid 1px #666; height: 30px; } table thead tr{ background-color: #ccc; } td{ border: solid 1px #666; } th{ border: solid 1px #666; text-align: center; cursor: pointer; } .sequence{ text-align: center; } .hover{ background-color: #3399FF; } /style /head body div table id="tableSort" thead tr th type="number" 序号 /th th type="string" 书名 /th th type="number" 价格(元) /th th type="string" 出版时间 /th th type="number" 印刷量(册) /th th type="ip" IP /th /tr /thead tbody tr td 1 /td td 狼图腾 /td td 29.80 /td td 2009-10 /td td 50000 /td td 192.168.1.125 /td /tr tr td 2 /td td 孝心不能等待 /td td 29.80 /td td 2009-09 /td td 800 /td td 192.68.1.125 /td /tr tr td 3 /td td 藏地密码2 /td td 28.00 /td td 2008-10 /td td /td td 192.102.0.12 /td /tr tr td 4 /td td 藏地密码1 /td td 24.80 /td td 2008-10 /td td /td td 215.34.126.10 /td /tr tr td 5 /td td 设计模式之禅 /td td 69.00 /td td 2011-12 /td td /td td 192.168.1.5 /td /tr tr td 6 /td td 轻量级 Java EE 企业应用实战 /td td 99.00 /td td 2012-04 /td td 5000 /td td 192.358.1.125 /td /tr tr td 7 /td td Java 开发实战经典 /td td 79.80 /td td 2012-01 /td td 2000 /td td 192.168.1.25 /td /tr tr td 8 /td td Java Web 开发实战经典 /td td 69.80 /td td 2011-11 /td td 2500 /td td 215.168.54.125 /td /tr /tbody /table /div /body /html 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 len; i++){ type = trsValue[i].split(".separator")[0]; for(var j = i + 1; j len; 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 len; 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的相关操作上要是没有“夏の寒风”的 帮忙肯定很难完成。对这个效果自己还是很满意的,只是在实现的操作上拼接 字符串,截取字符串的过程有些繁琐,不够简单明了,还有待改进。
/
本文档为【Jquery 选中表格一列并对表格排序实现原理】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。

历史搜索

    清空历史搜索