Jquery 选中表格一列并对表格排序实现原理Jquery 选中表格一列并对表格排序实现原理
选中表格一列并对表格排序实现原理该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个 tr 中的html,同时获取每个 tr 标签下对应获取到的列号的 td 标签中的内容,并取得 th 标签的type属
性值,需要的朋友可以了解下
在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理。
为了更好的理解在前端对表格进行排序的...
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,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。