html表格排序之徹底詳解
html表格排序的流程爲：
1 獲取鼠標點擊的 表頭單元格 的列號
2 遍歷全部的數據行，獲取每一個<tr>中的html
3 同時獲取每一個<tr>標籤下對應獲取到的列號的<td>標籤中的內容
4 並取得<th>標籤的type屬性值（number string ip）
5 將獲取<tr>的html、<td>的內容和<th>的type屬性值拼接成字符串添加到數組array中
6 而後將表格<tr>中的html所有置空
7 根據type屬性值的不一樣採用不一樣的方法對<td>的內容進行比較
8 根據比較結果對數組array進行排序
9 而後將排序後的數組元素從新賦值給已經置空的<tr>
10 若是已經對該列排序過了，則直接對數組進行倒置
提供數值、字符串以及IP地址三種類型的排序規則。字符串類型排序規則採用javascript的localeCompare方法。
具體代碼：
<!DOCTYPE HTML>
<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">
div{
width: 1024px;
margin: 0 auto;/*div相對屏幕左右居中*/
}
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>
<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">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>
<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所在的列號
//鼠標移除和聚焦的效果，不重要
$(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"); //獲取當前點擊列的 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() { //遍歷全部的tr標籤
var tds = $(this).find('td');//查找全部的 td 標籤
//將當前的點擊列 push 到一個新的列表中
//包括 當前行的 類型、當前索引的 值，和當前行的值
trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
$(this).html("");//清空當前列
});
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];//當前值
value2 = trsValue[j].split(".separator")[1];//當前值的下一個
if(type == "number"){
//js 三元運算 若是 values1 等於 '' （空） 那麼，該值就爲0，不然 改值爲當前值
value1 = value1 == "" ? 0 : value1;
value2 = value2 == "" ? 0 : value2;
//parseFloat() 函數可解析一個字符串，並返回一個浮點數。
//該函數指定字符串中的首個字符是不是數字。若是是，則對字符串進行解析，直到到達數字的末端爲止，而後以數字返回該數字，而不是做爲字符串。
//若是字符串的第一個字符不能被轉換爲數字，那麼 parseFloat() 會返回 NaN。
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 {
//JavaScript localeCompare() 方法 用本地特定的順序來比較兩個字符串。
//說明比較結果的數字。
// 若是 stringObject 小於 target，則 localeCompare() 返回小於 0 的數。
// 若是 stringObject 大於 target，則該方法返回大於 0 的數。
// 若是兩個字符串相等，或根據本地排序規則沒有區別，該方法返回 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轉成整型 ？？？？？
function ip2int(ip){
var num = 0;
ip = ip.split(".");
//Number() 函數把對象的值轉換爲數字。
num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
return num;
}
})
</script>
</body>
</html>
相關文章
- 1. HTML表格基礎詳解
- 2. 徹底理解各種排序算法
- 3. 三分鐘徹底理解堆排序
- 4. HTML精肯定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之徹底詳解
- 5. Javascript對HTML表格排序-很實用
- 6. html-表格和表單（詳細講解）
- 7. 表格排序
- 8. Android 多線程之HandlerThread 徹底詳解
- 9. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之徹底詳解(
- 10. Android 多線程之IntentService 徹底詳解
- 更多相關文章...
- • C# 排序列表（SortedList） - C#教程
- • ARP報文格式詳解 - TCP/IP教程
- • 算法總結-歸併排序
- • Flink 數據傳輸及反壓詳解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章