快捷導(dǎo)航

Jquery 選中表格一列并對表格排序?qū)崿F(xiàn)原理

更新時(shí)間：2012年12月15日 11:12:16 作者：

該實(shí)現(xiàn)的主要思想是：獲取鼠標(biāo)點(diǎn)擊的表頭單元格的列號，遍歷數(shù)據(jù)行，獲取每個(gè)<tr>中的html，同時(shí)獲取每個(gè)<tr>標(biāo)簽下對應(yīng)獲取到的列號的<td>標(biāo)簽中的內(nèi)容，并取得<th>標(biāo)簽的type屬性值，需要的朋友可以了解下

在前端對表格排序的Jquery插件有很多，功能也很強(qiáng)大，比如說Jquery Data Tables對表格的處理就相當(dāng)強(qiáng)大，可對表格進(jìn)行排序，搜索，分頁等操作，不過沒有仔細(xì)研究過其實(shí)現(xiàn)原理。

為了更好的理解在前端對表格進(jìn)行排序的原理，也為了進(jìn)一步的學(xué)習(xí)Jquery，所以決定用Jquery來實(shí)現(xiàn)一個(gè)對表格進(jìn)行排序的小功能。

該實(shí)現(xiàn)的主要思想是：獲取鼠標(biāo)點(diǎn)擊的表頭單元格的列號，遍歷數(shù)據(jù)行，獲取每個(gè)<tr>中的html，同時(shí)獲取每個(gè)<tr>標(biāo)簽下對應(yīng)獲取到的列號的<td>標(biāo)簽中的內(nèi)容，并取得<th>標(biāo)簽的type屬性值，將獲取<tr>的html、<td>的內(nèi)容和<th>的type屬性值拼接成字符串添加到數(shù)組array中，然后將表格<tr>中的html全部置空，根據(jù)type屬性值的不同采用不同的方法對<td>的內(nèi)容進(jìn)行比較，根據(jù)比較結(jié)果對數(shù)組array進(jìn)行排序，然后將排序后的數(shù)組元素重新賦值給已經(jīng)置空的<tr>。如果已經(jīng)對該列排序過了，則直接對數(shù)組進(jìn)行倒置。提供數(shù)值、字符串以及IP地址三種類型的排序規(guī)則。字符串類型排序規(guī)則采用javascript的localeCompare方法，該方法支持漢字字符串的排序，遺憾的是該方法不兼容谷歌瀏覽器。所以在谷歌瀏覽器上漢字字符串的排序結(jié)果會不正確。

HTML代碼清單：

復(fù)制代碼代碼如下:

 
View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title> 表格排序 </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="tschengbin"> 
<meta name="Keywords" content="jquery tableSort"> 
<meta name="Description" content=""> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="tableSort.js"></script> 
<style type="text/css"> 
div{ 
width: 1024px; 
margin: 0 auto;/*div相對屏幕左右居中*/ 
} 
table{ 
border: solid 1px #666; 
border-collapse: collapse; 
width: 100%; 
cursor: 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> 
</head> 
<body> 
<div> 
<table id="tableSort"> 
<thead> 
<tr> 
<th type="number">序號</th> 
<th type="string">書名</th> 
<th type="number">價(jià)格（元）</th> 
<th type="string">出版時(shí)間</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è)計(jì)模式之禪</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)用實(shí)戰(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ā)實(shí)戰(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ā)實(shí)戰(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> 

tableSort.js代碼清單：

復(fù)制代碼代碼如下:

 
View Code 
$(document).ready(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所在的列號 
$(this).mouseover(function(){ 
tbBodyTr.each(function(){//編列tbody下的tr 
var tds = $(this).find("td");//獲取列號為參數(shù)index的td對象集合 
$(tds[thisIndex]).addClass("hover"); 
}); 
}).mouseout(function(){ 
tbBodyTr.each(function(){ 
var tds = $(this).find("td"); 
$(tds[thisIndex]).removeClass("hover"); 
}); 
}); 
$(this).click(function() { 
var dataType = $(this).attr("type"); 
checkColumnValue(thisIndex, dataType); 
}); 
}); 
$("tbody tr").removeClass();//先移除tbody下tr的所有css類 
$("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'); 
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++){ 
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轉(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; 
} 
}) 