jquery實現(xiàn)的table排序功能示例
更新時間：2017年03月10日 11:59:35 作者：張佳美
這篇文章主要介紹了jquery實現(xiàn)的table排序功能,涉及基于jQuery的頁面元素屬性動態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)的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; /*該屬性定義了鼠標(biāo)指針放在一個元素邊界范圍內(nèi)時所用的光標(biāo)形狀,default默認(rèn)光標(biāo)（通常是一個箭頭）*/
}
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; /*光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）*/
}
.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所在的列號
//給表態(tài)th增加鼠標(biāo)位于上方時發(fā)生的事件
$(this).mouseover(function () {
tbBodyTr.each(function () {//編列tbody下的tr
var tds = $(this).find("td"); //獲取列號為參數(shù)index的td對象集合
$(tds[thisIndex]).addClass("hover");//給列號為參數(shù)index的td對象添加樣式
});
}).mouseout(function () {//給表頭th增加鼠標(biāo)離開時的事件
tbBodyTr.each(function () {
var tds = $(this).find("td");
$(tds[thisIndex]).removeClass("hover");//鼠標(biāo)離開時移除td對象上的樣式
});
});
$(this).click(function () {//給當(dāng)前表頭th增加點擊事件
var dataType = $(this).attr("type");//點擊時獲取當(dāng)前th的type屬性值
checkColumnValue(thisIndex, dataType);
});
});
$("tbody tr").removeClass(); //先移除tbody下tr的所有css類
//table中tbody中tr鼠標(biāo)位于上面時添加顏色,離開時移除顏色
$("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列的某一行的單元格內(nèi)容與該單元格所在行的行內(nèi)容添加到數(shù)組trsValue中
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
$(this).html("");
});
var len = trsValue.length;
if (index == sortIndex) {
//如果已經(jīng)排序了則直接倒序
trsValue.reverse();
} else {
for (var i = 0; i < len; i++) {
//split() 方法用于把一個字符串分割成字符串?dāng)?shù)組
//獲取每行分割后數(shù)組的第一個值,即此列的數(shù)組類型,定義了字符串\數(shù)字\Ip
type = trsValue[i].split(".separator")[0];
for (var j = i + 1; j < len; j++) {
//獲取每行分割后數(shù)組的第二個值,即文本值
value1 = trsValue[i].split(".separator")[1];
//獲取下一行分割后數(shù)組的第二個值,即文本值
value2 = trsValue[j].split(".separator")[1];
//接下來是數(shù)字\字符串等的比較
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轉(zhuǎn)成整型
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>
設(shè)計模式之禪
</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 企業(yè)應(yīng)用實戰(zhàn)
</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 開發(fā)實戰(zhàn)經(jīng)典
</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 開發(fā)實戰(zhàn)經(jīng)典
</td>
<td>
69.80
</td>
<td>
2011-11
</td>
<td>
2500
</td>
<td>
215.168.54.125
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
運行效果圖如下：
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼
這篇文章主要介紹了jQuery EasyUI datagrid在翻頁以后仍能記錄被選中行的實現(xiàn)代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
jQuery操作Select的Option上下移動及移除添加等等
jQuery操作Select Option：向上移動選中的option、向下移動選中的option、移除選中的option、獲取所有的option值、添加option等等，下面有個不錯的示例，感興趣的朋友不要錯過2013-11-11
jQuery實現(xiàn)點擊某個div打開層，點擊其他div關(guān)閉層實例分析(阻止冒泡)
這篇文章主要介紹了jQuery實現(xiàn)點擊某個div打開層，點擊其他div關(guān)閉層的方法,結(jié)合實例形式分析了jQuery兩種阻止冒泡實現(xiàn)彈出層的處理技巧,需要的朋友可以參考下2016-11-11
JQuery選中checkbox方法代碼實例（全選、反選、全不選）
這篇文章主要介紹了JQuery選中checkbox方法代碼實例（全選、反選、全不選）,本文直接給出代碼實例,需要的朋友可以參考下2015-04-04
flash+jQuery實現(xiàn)可關(guān)閉及重復(fù)播放的壓頂廣告
本文給大家分享的是仿游戲門戶網(wǎng)站可關(guān)閉及重復(fù)播放泰山壓頂廣告是一款基于jquery實現(xiàn)的打開網(wǎng)頁緩慢下拉廣告代碼。有需要的小伙伴可以參考下。2015-04-04
在上一篇文章 《鼠標(biāo)事件延時切換插件》 中，我已經(jīng)寫了幾個簡單的延時器的例子，今天突然想到j(luò)Query的自定義動畫的animate方法可以使用delay2011-03-03
JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實現(xiàn)代碼，具有一定的參考價值。下面跟著小編一起來看下吧2016-12-12
這篇文章主要介紹了單擊和雙擊事件的沖突處理方法,需要的朋友可以參考下2014-04-04
jQuery插件DataTables分頁開發(fā)心得體會
這篇文章主要為大家分享了jQuery插件DataTables分頁開發(fā)心得體會，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
下面小編就為大家?guī)硪黄猨Query圖片漸變特效的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06