Jquery는 테이블 열을 작동하고 테이블을 정렬합니다.
- php中世界最好的语言원래의
- 2018-04-25 10:18:001644검색
이번에는 Jquery를 사용하여 테이블 열을 조작하고 테이블을 정렬하는 방법을 알려드리겠습니다. Jquery에서 테이블 열을 조작하고 테이블을 정렬할 때 주의사항은 무엇인가요?
이 구현의 주요 아이디어는 마우스로 클릭한 헤더 셀의 열 번호를 가져오고, 데이터 행을 탐색하고, 각 a34de1251f0d9fe1e645927f19a896e8에서 HTML을 가져오고, 각 6df3ca0ccfded21e13a511ed16e052cf 태그에 있는 내용과 b4d429308760b6c2d20d6300079ed38e 태그의 유형 속성 값을 얻을 수 있습니다. 정렬을 위한 Jquery 플러그인이 많이 있습니다. 예를 들어 Jquery 데이터 테이블은 테이블에 대한 정렬, 검색, 페이징 및 기타 작업을 수행할 수 있지만 구현 원리를 주의 깊게 연구하지 않았습니다.
프런트 엔드에서 테이블 정렬 원리를 더 잘 이해하고 Jquery를 더 배우기 위해 Jquery를 사용하여 테이블 정렬이라는 작은 기능을 구현하기로 결정했습니다.이 구현의 주요 아이디어는 마우스로 클릭한 헤더 셀의 열 번호를 가져오고, 데이터 행을 탐색하고, 각 a34de1251f0d9fe1e645927f19a896e8에서 HTML을 가져오고, 각 a34de1251f0d9fe1e645927f19a896e8 아래에 해당하는 열을 가져오는 것입니다. label 숫자의 b6c5a531a458a2e790c1fd6421739d1c 태그에 있는 내용을 가져오고, b4d429308760b6c2d20d6300079ed38e 태그의 유형 속성 값을 가져옵니다. b4d429308760b6c2d20d6300079ed38e의 속성 값이 문자로 이어집니다. 문자열이 배열 배열에 추가된 다음 a34de1251f0d9fe1e645927f19a896e8 테이블의 모든 HTML이 숨겨집니다. 다른 유형 속성 값에 따라 배열 배열이 비교 결과에 따라 정렬됩니다. 그런 다음 정렬된 배열 요소를 빈 a34de1251f0d9fe1e645927f19a896e8에 다시 할당합니다. 열이 이미 정렬된 경우 배열을 직접 반전합니다. 숫자, 문자열, IP 주소 등 세 가지 유형의 정렬 규칙이 제공됩니다. 문자열 유형 정렬 규칙은 한자 문자열 정렬을 지원하는 JavaScript의 localeCompare 메서드를 사용하지만 이 메서드는 Google Chrome과 호환되지 않습니다. 따라서 Google Chrome의 한자 문자열 정렬 결과가 올바르지 않게 됩니다.
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 중국어 웹사이트의 다른 관련 기사를 주목하세요. !
추천 도서:
JS+JQuery 테이블 행의 동적 연산에 대한 자세한 설명JSON.parse()와 JSON.stringify()의 차이점과 사용 방법에 대한 자세한 설명위 내용은 Jquery는 테이블 열을 작동하고 테이블을 정렬합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!