使用jQuery实现表格排序功能
191 浏览量
更新于2024-09-05
收藏 116KB PDF 举报
"使用jQuery实现表格排序功能的示例代码"
在网页开发中，有时我们需要对HTML表格（table）的数据进行排序，以便用户可以更方便地查看和理解信息。jQuery是一个流行的JavaScript库，它提供了丰富的API来简化DOM操作，包括表格排序。本文将通过一个实例展示如何使用jQuery实现表格排序功能。
首先，我们来看一下HTML结构。在这个例子中，我们创建了一个基本的HTML表格，包括thead和tbody部分，thead用于存放表头，tbody则包含实际的表格数据。表格的每一行（tr）和每一列（td）都有相应的样式设置，如边框、背景色等，以提高视觉效果。
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- ... -->
<title>Document</title>
</head>
<body>
<div style="width:1024px; margin:0 auto;">
<table id="tableSort">
<thead>
<tr>
<!-- 表头内容 -->
</tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
// JavaScript代码
</script>
</body>
</html>
```
接下来，我们引入jQuery库，并在文档加载完成后执行相关功能。这里我们使用`$(function() { ... })`来确保在DOM完全加载后运行代码。
```javascript
$(function() {
var tableObject = $('#tableSort'); // 获取id为tableSort的table对象
var tbHead = tableObject.children('thead'); // 获取table对象下的表头
// ...
});
```
为了实现排序，我们需要监听表头（th）的点击事件，当用户点击表头时，根据当前列的数据进行升序或降序排序。这里我们添加了一个自定义的CSS类`hover`，当鼠标悬停在表头时改变背景色，增强交互体验。
```javascript
tbHead.find('th').click(function() {
var thIndex = $(this).index(); // 获取当前点击的th元素的索引
var sortType = $(this).hasClass('asc') ? 'desc' : 'asc'; // 判断当前排序类型
// 对tbody中的数据进行排序
var sortedRows = tableObject.find('tbody tr').sort(function(a, b) {
var valA = $(a).children('td:eq(' + thIndex + ')').text();
var valB = $(b).children('td:eq(' + thIndex + ')').text();
return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
});
if (sortType === 'asc') {
$(this).removeClass('desc').addClass('asc');
} else {
$(this).removeClass('asc').addClass('desc');
}
// 将排序后的数据重新插入到表格中
tableObject.find('tbody').empty().append(sortedRows);
});
```
这段代码实现了点击表头进行排序的功能。它首先获取了被点击表头的索引，然后比较了表格行（tr）中对应列（td）的文本值，以确定排序顺序。排序完成后，更新排序标志并重新插入排序后的行。
总结来说，这个jQuery实现的表格排序功能是通过监听表头的点击事件，获取用户选择的排序依据，然后对表格数据进行比较和排序，最后更新表格内容以展示排序结果。这种方法可以灵活应用于各种表格数据，提供用户友好的交互体验。
jquery实现的实现的table排序功能示例排序功能示例
本文实例讲述了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 {
下载后可阅读完整内容，剩余3页未读，立即下载
2019-07-05 上传
2011-03-29 上传
2023-06-08 上传
2023-05-27 上传
2023-06-14 上传
2023-05-23 上传
2023-06-10 上传
2023-06-21 上传
2023-05-31 上传
weixin_38529486
- 粉丝: 7
- 资源: 942
我的内容管理
展开
最新资源
- 李兴华Java基础教程：从入门到精通
- U盘与硬盘启动安装教程：从菜鸟到专家
- C++面试宝典：动态内存管理与继承解析
- C++ STL源码深度解析：专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手：数据管理与企业增值的战略
- Eclipse IDE基础教程：从入门到精通
- Shell脚本专家宝典：全面学习与资源指南
- Tomcat安装指南：附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华：必备术语集锦
