Jquery操作表格列以及對表格排序
- php中世界最好的语言原創
- 2018-04-25 10:18:001706瀏覽
這次帶給大家Jquery操作表格列以及對表格排序，Jquery操作表格列以及對表格排序的注意事項有哪些，下面就是實戰案例，一起來看一下。
該實現的主要想法是：取得滑鼠點擊的表頭單元格的列號，遍歷資料行，取得每個a34de1251f0d9fe1e645927f19a896e8中的html，同時取得每個a34de1251f0d9fe1e645927f19a896e8標籤下對應取得到的列號的b6c5a531a458a2e790c1fd6421739d1c標籤中的內容，並取得b4d429308760b6c2d20d6300079ed38e標籤的type屬性值，需要的朋友可以了解下
在前端對表格排序的Jquery外掛程式有很多，功能也很強大，比如說Jquery Data Tables對錶格的處理就相當強大，可對錶格進行排序，搜索，分頁等操作，不過沒有仔細研究過其實現原理。
為了更好的理解在前端對表格進行排序的原理，也為了進一步的學習Jquery，所以決定用Jquery來實現一個對錶格進行排序的小功能。
該實現的主要想法是：取得滑鼠點擊的表頭單元格的列號，遍歷資料行，取得每個a34de1251f0d9fe1e645927f19a896e8中的html，同時取得每個a34de1251f0d9fe1e645927f19a896e8標籤下對應到的列號的b6c5a531a458a2e790c1fd6421739d1c標籤中的內容，並取得b4d429308760b6c2d20d6300079ed38e標籤的type屬性值，將取得a34de1251f0d9fe1e645927f19a896e8的html、b6c5a531a458a2e790c1fd6421739d1c的內容和b4d429308760b6c2d20d6300079ed38e的type屬性值拼接成字串加入到陣列array中，然後將表格a34de1251f0d9fe1e645927f19a896e8中的html全部置空，根據type屬性值的不同採用不同的方法對b6c5a531a458a2e790c1fd6421739d1c的內容進行比較，根據比較結果對陣列array進行排序，然後將排序後的陣列元素重新賦值給已經置空的a34de1251f0d9fe1e645927f19a896e8。如果已經對該列排序過了，則直接對陣列進行倒置。提供數值、字串以及IP位址三種類型的排序規則。字串類型排序規則採用javascript的localeCompare方法，該方法支援漢字字串的排序，遺憾的是該方法不相容於Google瀏覽器。所以在Google瀏覽器上漢字字串的排序結果會不正確。
HTML程式碼清單：
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 表格排序 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="tschengbin">
<meta name="Keywords" content="jquery tableSort">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="tableSort.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>设计模式之禅</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>
</p>
</body>
</html>
tableSort.js代码清单：
复制代码 代码如下:
View Code
$(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");
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() {
var tds = $(this).find('td');
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++){
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;
}
}) 運行結果： 
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
詳解JSON.parse()與JSON. stringify()的差異以及使用方法
以上是Jquery操作表格列以及對表格排序的詳細內容。更多資訊請關注PHP中文網其他相關文章！