首頁 > 開發者 > JavaScript
jquery實現的table排序功能樣本，jquery排序功能
本文執行個體講述了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) {//該方法不相容Google瀏覽器 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>
運行如下：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
