使用jQuery实现表格排序功能

41 浏览量更新于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>

<head>

<title>Document</title>

</head>

div

{

width: 1024px;

margin: 0 auto; /*div相对屏幕左右居中*/

}

table

{

border: solid 1px #666;

border-collapse: collapse;

width: 100%;

cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标（通常是一个箭头）*/

}

{

border: solid 1px #666;

height: 30px;

}

table thead tr

{

background-color: #ccc;

}

{

border: solid 1px #666;

}

{

border: solid 1px #666;

text-align: center;

cursor: pointer; /*光标呈现为指示链接的指针（一只手）*/

}

.sequence

{

text-align: center;

}

.hover

{

background-color: #3399FF;

}

</style>

</script>

$(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页未读，立即下载

weixin_38529486

粉丝: 7
资源: 942

使用jQuery实现表格排序功能

jQuery Table表格排序显示代码.zip

jquery实现表格排序

jQuery实现表格排序功能示例代码

jQuery实现的表格前端排序功能示例

jquery 实现表格排序功能

用jquery.sortElements实现table排序

jQuery实现为table表格动态添加或删除tr功能示例

jquery table 表格 排序

jquery table 排序插件

使用jqueryUI实现表格排序功能

最新资源

jquery table 表格排序