溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“html表格怎么排序”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
對于表格排序的流程如下：
獲取鼠標(biāo)點擊的表頭單元格遍歷我們所有的數(shù)據(jù)，從而獲取<tr>的內(nèi)容獲取相對應(yīng)<tr>下的<td>標(biāo)簽，然后我們將獲取的<tr>、<td>生成我們的數(shù)組，根據(jù)不同的<tr>設(shè)定來采取不同的方式進(jìn)行內(nèi)容對比，這樣子在根據(jù)比較結(jié)果對數(shù)組array進(jìn)行排序
；然后將排序后的數(shù)組元素重新賦值給已經(jīng)置空的<tr> 。 如果已經(jīng)對該列排序過了，則直接對數(shù)組進(jìn)行倒置。
<html> <head> <title> 表格排序 </title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content="tschengbin"> <meta name="Keywords" content="jquery tableSort"> <meta name="Description" content=""> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> p { width: 1024px; margin: 0 auto; /*p相對屏幕左右居中*/ } 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> <p> <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">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> </p> <script type="text/javascript"> $(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所在的列號 //鼠標(biāo)移除和聚焦的效果，不重要 $(this).mouseover(function() { //鼠標(biāo)移開事件 tbBodyTr.each(function() { //編列tbody下的tr var tds = $(this).find("td"); //獲取列號為參數(shù)index的td對象集合 $(tds[thisIndex]).addClass("hover"); }); }).mouseout(function() { //鼠標(biāo)聚焦時間 tbBodyTr.each(function() { var tds = $(this).find("td"); $(tds[thisIndex]).removeClass("hover"); }); }); $(this).click(function() { //鼠標(biāo)點擊事件 var dataType = $(this).attr("type"); //獲取當(dāng)前點擊列的 type checkColumnValue(thisIndex, dataType); //對當(dāng)前點擊的列進(jìn)行排序 （當(dāng)前索引，排序類型） }); }); //顯示效果，不重要 $("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(); //創(chuàng)建一個新的列表 tbBodyTr.each(function() { //遍歷所有的tr標(biāo)簽 var tds = $(this).find('td'); //查找所有的 td 標(biāo)簽 //將當(dāng)前的點擊列 push 到一個新的列表中 //包括 當(dāng)前行的 類型、當(dāng)前索引的 值，和當(dāng)前行的值 trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this) .html()); $(this).html(""); //清空當(dāng)前列 }); var len = trsValue.length; //獲取所有要拍戲的列的長度 if (index == sortIndex) { //sortIndex =-1 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]; //當(dāng)前值 value2 = trsValue[j].split(".separator")[1]; //當(dāng)前值的下一個 if (type == "number") { //js 三元運(yùn)算 如果 values1 等于 '' （空） 那么，該值就為0，否則 改值為當(dāng)前值 value1 = value1 == "" ? 0 : value1; value2 = value2 == "" ? 0 : value2; //parseFloat() 函數(shù)可解析一個字符串，并返回一個浮點數(shù)。 //該函數(shù)指定字符串中的首個字符是否是數(shù)字。如果是，則對字符串進(jìn)行解析，直到到達(dá)數(shù)字的末端為止，然后以數(shù)字返回該數(shù)字，而不是作為字符串。 //如果字符串的第一個字符不能被轉(zhuǎn)換為數(shù)字，那么 parseFloat() 會返回 NaN。 if (parseFloat(value1) > parseFloat(value2)) { //如果當(dāng)前值 大于 下一個值 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 { //JavaScript localeCompare() 方法 用本地特定的順序來比較兩個字符串。 //說明比較結(jié)果的數(shù)字。 // 如果 stringObject 小于 target，則 localeCompare() 返回小于 0 的數(shù)。 // 如果 stringObject 大于 target，則該方法返回大于 0 的數(shù)。 // 如果兩個字符串相等，或根據(jù)本地排序規(guī)則沒有區(qū)別，該方法返回 0。 if (value1.localeCompare(value2) > 0) { //該方法不兼容谷歌瀏覽器 var temp = trsValue[j]; trsValue[j] = trsValue[i]; trsValue[i] = temp; } } } } } for (var i = 0; i < len; i++) { //將排序完的 值 插入到 表格中 //:eq(index) 匹配一個給定索引值的元素 $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]); //console.log($("tbody tr:eq(" + i + ")").html()) } sortIndex = index; } //IP轉(zhuǎn)成整型 ？？？？？ function ip2int(ip) { var num = 0; ip = ip.split("."); //Number() 函數(shù)把對象的值轉(zhuǎn)換為數(shù)字。 num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[ 3]); return num; } }) </script> </body></html>“html表格怎么排序”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼