jquery实现table排序功能实例分享
本文主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下，希望能帮助到大家。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<style type="text/css">
p
{
width: 1024px;
margin: 0 auto; /*p相对屏幕左右居中*/
}
table
{
border: solid 1px #666;
border-collapse: collapse;
width: 100%;
cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,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>
<SCRIPT type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
$(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所在的列号
//给表态th增加鼠标位于上方时发生的事件
$(this).mouseover(function () {
tbBodyTr.each(function () {//编列tbody下的tr
var tds = $(this).find("td"); //获取列号为参数index的td对象集合
$(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
});
}).mouseout(function () {//给表头th增加鼠标离开时的事件
tbBodyTr.each(function () {
var tds = $(this).find("td");
$(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式
});
});
$(this).click(function () {//给当前表头th增加点击事件
var dataType = $(this).attr("type");//点击时获取当前th的type属性值
checkColumnValue(thisIndex, dataType);
});
});
$("tbody tr").removeClass(); //先移除tbody下tr的所有css类
//table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
$("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');
//获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中
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++) {
//split() 方法用于把一个字符串分割成字符串数组
//获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
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;
}
})
</script>
<BODY>
<p>
<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 class="hover">
<td class="sequence">
1
</td>
<td>
狼图腾
</td>
<td>
29.80
</td>
<td>
2009-10
</td>
<td>
50000
</td>
<td>
192.168.1.125
</td>
</tr>
<tr>
<td class="sequence">
2
</td>
<td>
孝心不能等待
</td>
<td>
29.80
</td>
<td>
2009-09
</td>
<td>
800
</td>
<td>
192.68.1.125
</td>
</tr>
<tr>
<td class="sequence">
3
</td>
<td>
藏地密码2
</td>
<td>
28.00
</td>
<td>
2008-10
</td>
<td>
</td>
<td>
192.102.0.12
</td>
</tr>
<tr>
<td class="sequence">
4
</td>
<td>
藏地密码1
</td>
<td>
24.80
</td>
<td>
2008-10
</td>
<td>
</td>
<td>
215.34.126.10
</td>
</tr>
<tr>
<td class="sequence">
5
</td>
<td>
设计模式之禅
</td>
<td>
69.00
</td>
<td>
2011-12
</td>
<td>
</td>
<td>
192.168.1.5
</td>
</tr>
<tr>
<td class="sequence">
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 class="sequence">
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 class="sequence" onclick="sortArray()">
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>
</p>
</body>
</html>运行效果图如下：
相关推荐：
js实现table排序_html/css_WEB-ITnose
一实用的实现table排序的Javascript类库_js面向对象
实现超用户体验 table排序javascript实现代码_javascript技巧
以上是jquery实现table排序功能实例分享的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
豆包app有什么功能
Mar 01, 2024 pm 10:04 PM
豆包app里会有很多ai创作的功能，那么豆包app有什么功能呢？用户们可以通过这个软件来创作绘画，和ai进行聊天，还能够为用户生成文章，帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法，下面就是具体内容，赶紧看看吧！豆包app有什么功能答：可以绘画、聊天、写文、找歌。功能介绍：1、问题查询：可以通过ai来更快的找到问题的答案，什么样的问题都是可以询问。2、图片生成：可以有ai来为大家创建不同的图片，只需要告诉大家大概的要求。3、ai聊天：能够为用户们创建一个可以聊天的ai，
vivox100s和x100区别：性能对比及功能解析
Mar 23, 2024 pm 10:27 PM
vivox100s和x100手机都是vivo手机产品线中的代表机型，它们分别代表了vivo在不同时间段内的高端技术水平，因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较，帮助消费者更好地选择适合自己的手机。首先，我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的
自媒体到底是什么？它的主要特点和功能有哪些？
Mar 21, 2024 pm 08:21 PM
随着互联网的快速发展，自媒体这个概念已经深入人心。那么，自媒体到底是什么？它有哪些主要特点和功能呢？接下来，我们将一一探讨这些问题。一、自媒体到底是什么？自媒体，顾名思义，就是自己就是媒体。它是指通过互联网平台，个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体，如报纸、电视、电台等，自媒体具有更强的互动性和个性化，让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些？1.低门槛：自媒体的崛起降低了进入媒体行业的门槛，不再需要繁琐的设备和专业的团队，一部手
小红书账号管理软件有哪些功能？怎么经营小红书账号？
Mar 21, 2024 pm 04:16 PM
随着小红书在年轻人中的流行，越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中，我们将讨论一些小红书账号管理软件的功能，并探讨如何更好地经营小红书账号。随着社交媒体的发展，许多人发现自己需要管理多个社交账号。对于小红书用户来说，这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号，包括自动发布内容、定时发布、数据分析等功能。通过这些工具，用户可以更高效地管理他们的账号，提高账号的曝光率和关注度。另一、小红书账号管理软件有
PHP技巧：快速实现返回上一页功能
Mar 09, 2024 am 08:21 AM
PHP技巧：快速实现返回上一页功能在网页开发中，经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验，让用户更加方便地在网页之间进行导航。在PHP中，我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能，并提供具体的PHP代码示例。在PHP中，我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL
什么是Discuz？Discuz的定义和功能介绍
Mar 03, 2024 am 10:33 AM
《探索Discuz：定义、功能及代码示例》随着互联网的迅猛发展，社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中，Discuz作为国内较为知名的一种开源论坛软件，备受广大网站开发者和管理员的青睐。那么，什么是Discuz？它又有哪些功能，能为我们的网站提供怎样的帮助呢？本文将对Discuz进行详细介绍，并附上具体的代码示例，帮助读者更
Linux下GDM的功能和作用详解
Mar 01, 2024 pm 04:18 PM
Linux下GDM的功能和作用详解在Linux操作系统中，GDM（GNOMEDisplayManager）是一种图形化登录管理器，它提供了用户在系统中登录和注销的界面。GDM通常是GNOME桌面环境的一部分，但也可以被其他桌面环境所使用。GDM的作用不仅仅是提供一个登录界面，还包括用户会话管理、屏幕保护、自动登录等功能。GDM的功能主要包括以下几个方面：
PHP是做什么用的？探究PHP的作用与功能
Mar 24, 2024 am 11:39 AM
PHP是一种广泛应用于Web开发的服务器端脚本语言，它的主要作用是生成动态网页内容，与HTML结合使用，可以创建出丰富多彩的网页。PHP的功能强大，它可以执行各种数据库操作、文件操作、表单处理等任务，为网站提供强大的交互性和功能性。在接下来的文章中，我们将进一步探究PHP的作用与功能，并配以详细的代码示例。首先，我们来看一下PHP的常见用途：动态网页生成：P
