Jquery 選取表格一列並對表格排序實作原理_jquery

在前端對錶格排序的Jquery插件有很多，功能也很強大，比如說Jquery Data Tables對錶格的處理就相當強大，可對錶格進行排序，搜索，分頁等操作，不過沒有仔細研究過其實現原理。

為了更好的理解在前端對錶格進行排序的原理，也為了進一步的學習Jquery，所以決定用Jquery來實現一個對錶格進行排序的小功能。

實現的主要思想是：獲取滑鼠點擊的表頭單元格的列號，遍歷資料行，獲取每個

中的html，同時獲取每個 標籤下對應獲取到的列號的標籤中的內容，並取得 標籤的type屬性值，將取得 的html、的內容和 的type屬性值拼接成字串添加到陣列array中，然後將表格 中的html全部置空，根據type屬性值的不同採用不同的方法對的內容進行比較，根據比較結果對數組array進行排序，然後將排序後的陣列元素重新賦值給已經置空的 。如果已經對該列排序過了，則直接對陣列進行倒置。提供數值、字串以及IP位址三種類型的排序規則。字串類型排序規則採用javascript的localeCompare方法，該方法支援漢字字串的排序，遺憾的是該方法不相容於Google瀏覽器。所以在Google瀏覽器上漢字字串的排序結果會不正確。

HTML程式碼清單：

複製程式碼 程式碼如下.
View Code

序号	书名	价格（元）	出版时间	印刷量（册）	IP
1	狼图腾	29.80	2009-10	50000	192.168.1.125
2	孝心不能等待	29.80	2009-09	800	192.68.1.125
3	藏地密码2	28.00	2008-10		192.102.0.12
4	藏地密码1	24.80	2008-10		215.34.126.10
5	设计模式之禅	69.00	2011-12		192.168.1.5
6	轻量级 Java EE 企业应用实战	99.00	2012-04	5000	192.358.1.125
7	Java 开发实战经典	79.80	2012-01	2000	192.168.1.25
8	Java Web 开发实战经典	69.80	2011-11	2500	215.168.54.125

tableSort.js代碼清單：

複製代碼 程式碼如下:

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");//取得列號為參數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 type = trsValue[i].split(".separator")[0];
for(var j = i 1; 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] = tempValue[i] = tempValue[i] = tempValue[i] = tempValue[i] = tempValue[i] = tempValue[i] = tempValue[i] = tempValue。
}
} 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) {//此方法不相容Google瀏覽器
var temp = trsValue[j];
trsValue[j] = trsValue[i];
trsValue[i] = temp;
}
}
}
}
}
for(var i = 0; i $("tbody tr:eq(" i ")").html(trsValue[i].split (".separator")[2]);
}
sortIndex = index;
}
//IP轉成整數
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;
}
})

運作結果：
 
特別特別感謝網友“夏の寒風”，在Jquery的相關操作上要是沒有“夏の寒風”的幫忙肯定很難完成。對這個效果自己還是很滿意的，只是在實現的操作上拼接字符串，截取字符串的過程有些繁瑣，不夠簡單明了，還有待改進。