jquery实现的table排序功能示例
发布时间 - 2026-01-11 00:06:41 点击率：次本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考，具体如下：
<!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">
div
{
width: 1024px;
margin: 0 auto; /*div相对屏幕左右居中*/
}
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>
<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 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>
</div>
</body>
</html>
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
# jquery
# table
# 排序
# jQuery html表格排序插件tablesorter使用方法详解
# jQuery排序插件tableSorter使用方法
# jQuery利用sort对DOM元素进行排序操作
# javascript实现对表格元素进行排序操作
# 针对后台列表table拖拽比较实用的jquery拖动排序
# jQuery实现带分组数据的Table表头排序实例分析
# jquery实现的鼠标拖动排序Li或Table
# JQuery 构建客户/服务分离的链接模型中Table中的排序分析
# jquery对table做排序操作的实例演示
# 鼠标
# 移除
# 第二个
# 行号
# 单元格
# 是一个
# 放在
# 相关内容
# 第一个
# 遍历
# 感兴趣
# 给大家
# 一只手
# 更多关于
# 所述
# 出版时间
# 程序设计
# 转成
# 与该
# 不兼容
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
Win11怎样安装网易有道词典_Win11安装词典教程【步骤】
创业网站制作流程,创业网站可靠吗？
Laravel Eloquent访问器与修改器是什么_Laravel Accessors & Mutators数据处理技巧
Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用
手机怎么制作网站教程步骤,手机怎么做自己的网页链接？
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？
网站建设保证美观性，需要考虑的几点问题！
如何用美橙互联一键搭建多站合一网站？
怎样使用JSON进行数据交换_它有什么限制
什么是javascript作用域_全局和局部作用域有什么区别？
详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）
香港服务器网站生成指南：免费资源整合与高速稳定配置方案
Win11搜索栏无法输入_解决Win11开始菜单搜索没反应问题【技巧】
Android使用GridView实现日历的简单功能
如何快速搭建高效WAP手机网站吸引移动用户？
如何在建站之星网店版论坛获取技术支持？
Linux系统运维自动化项目教程_Ansible批量管理实战
Laravel如何处理和验证JSON类型的数据库字段
Linux后台任务运行方法_nohup与&使用技巧【技巧】
如何在Windows环境下新建FTP站点并设置权限？
百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧
Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】
北京企业网站设计制作公司,北京铁路集团官方网站？
怎么制作一个起泡网,水泡粪全漏粪育肥舍冬季氨气超过25ppm，可以有哪些措施降低舍内氨气水平？
手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办？
图片制作网站免费软件,有没有免费的网站或软件可以将图片批量转为A4大小的pdf？
如何在云虚拟主机上快速搭建个人网站？
Laravel Debugbar怎么安装_Laravel调试工具栏配置指南
Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件
Laravel怎么定时执行任务_Laravel任务调度器Schedule配置与Cron设置【教程】
Laravel定时任务怎么设置_Laravel Crontab调度器配置
b2c电商网站制作流程,b2c水平综合的电商平台？
HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
如何在VPS电脑上快速搭建网站？
浅析上传头像示例及其注意事项
Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】
JS中对数组元素进行增删改移的方法总结
Laravel观察者模式如何使用_Laravel Model Observer配置
EditPlus中的正则表达式 实战(4)
如何快速登录WAP自助建站平台？
JS碰撞运动实现方法详解
中山网站推广排名,中山信息港登录入口？
使用C语言编写圣诞表白程序
Laravel如何创建自定义Artisan命令？（代码示例）
Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程
Laravel如何实现用户密码重置功能？（完整流程代码）
中国移动官方网站首页入口 中国移动官网网页登录
PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】
Laravel如何设置自定义的日志文件名_Laravel根据日期或用户ID生成动态日志【技巧】