免費AI編程助手
在我們學(xué)習(xí)前端的過程中肯定會遇到少許的問題，那么我們今天就根據(jù)html來說說有關(guān)于：“html表格如何排序？”這個辦法。下面是小編收集的一些相關(guān)內(nèi)容大家可以互相學(xué)習(xí)參考。
對于表格排序的流程如下：
獲取鼠標(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 三元運算 如果 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>
總結(jié)：
以上就是今天和大家分享的有關(guān)于：“html表格如何排序？”這個問題的方法，當(dāng)然如果你有其他的看法也可以和大家一起探討分享。更多相關(guān)Html知識和內(nèi)容，我們都可以在W3cschool中學(xué)習(xí)和了解。希望小編的幫助對你有用。
