本文章和方法一用到的css和html相同,不同的是jquery对table的排序,欢迎大家吐槽!为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。
该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下对应获取到的列号的<td>标签中的内容，并取得<th>标签的type属性值，将获取<tr>的html、<td>的内容和<th>的type属性值拼接成字符串添加到数组array中，然后将表格<tr>中的html全部置空，根据type属性值的不同采用不同的方法对<td>的内容进行比较，根据比较结果对数组array进行排序，然后将排序后的数组元素重新赋值给已经置空的<tr>。如果已经对该列排序过了，则直接对数组进行倒置。
先看效果图:
排序前:
按价格排序后
现在来看实现代码吧:
CSS代码:
<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>HTML代码:
<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" οnclick="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>
Jquery代码部分
<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属性值 var trsValue = new Array(); //先声明一维 for (var i = 0; i < tbBodyTr.length; i++) { trsValue[i] = new Array(); //在声明二维 var tds = $(tbBodyTr[i]).find('td'); trsValue[i][1] = $(tds[$(this).index()]).html(); trsValue[i][2] = $(tbBodyTr[i]).html(); $(tbBodyTr[i]).html(""); } var len = trsValue.length; if ($(this).index() == sortIndex) { //如果已经排序了则直接倒序 trsValue.reverse(); } else { trsValue.sort(createCompact(dataType)); } for (var i = 0; i < len; i++) { $("tbody tr:eq(" + i + ")").html(trsValue[i][2]); } sortIndex = $(this).index(); }); }); $("tbody tr").removeClass(); //先移除tbody下tr的所有css类 //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色 $("tbody tr").mouseover(function () { $(this).addClass("hover"); }).mouseout(function () { $(this).removeClass("hover"); }); }); function createCompact(styType) { return function (object1, object2) { var value1 = object1[1]; var value2 = object2[1]; if (styType == "number") { //处理数字排序 return value2 - value1; } else { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } } } </script>
版权声明：本文为wdfscp原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。