本文實例講述了jquery實現的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; /*該屬性定義了鼠標指針放在一個元素邊界范圍內時所用的光標形狀,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><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所在的列號 //給表態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 { for (var i = 0; i < len; i++) { //split() 方法用于把一個字符串分割成字符串數組 //獲取每行分割后數組的第一個值,即此列的數組類型,定義了字符串/數字/Ip 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轉成整型 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> 設計模式之禪 </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" onclick="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> </body></html>運行效果圖如下：
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
