Jquery는 테이블의 열을 선택하고 테이블 구현을 정렬합니다.-JS 튜토리얼-php.cn

Jquery는 테이블의 열을 선택하고 테이블 구현을 정렬합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

풀어 주다： 2016-05-16 17:46:28

원래의

1120명이 탐색했습니다.

프런트 엔드에는 테이블 정렬을 위한 Jquery 플러그인이 많이 있으며 그 기능도 매우 강력합니다. 예를 들어 Jquery 데이터 테이블은 테이블 정렬, 검색, 페이징 및 기타 작업을 수행하는 데 매우 강력합니다. 그러나 나는 그것들을 주의 깊게 연구하지 않았습니다.

프런트 엔드에서 테이블 정렬의 원리를 더 잘 이해하고 Jquery를 더 배우기 위해 Jquery를 사용하여 테이블 정렬이라는 작은 기능을 구현하기로 결정했습니다.

이 구현의 주요 아이디어는 마우스로 클릭한 헤더 셀의 열 번호를 가져오고, 데이터 행을 탐색하고, 각 에서 html을 가져오고, 각 아래의 html을 가져오는 것입니다.

태그 획득된 열 번호의 태그 내용에 해당하고, 태그의 유형 속성 값을 가져옵니다. ; 및 의 유형이 문자열로 연결되어 배열 배열에 추가된 다음, 테이블 의 모든 HTML이 숨겨집니다. 다른 유형 속성 값에 따라 의 내용을 비교하는 데 사용되며, 비교 결과에 따라 < TR>. 열이 이미 정렬된 경우 배열을 직접 반전합니다. 숫자, 문자열, IP 주소의 세 가지 유형의 정렬 규칙이 제공됩니다. 문자열 유형 정렬 규칙은 한자 문자열 정렬을 지원하는 JavaScript의 localeCompare 메서드를 사용하지만 이 메서드는 Google Chrome과 호환되지 않습니다. 따라서 Google Chrome의 한자 문자열 정렬 결과가 올바르지 않습니다.

HTML 코드 목록:

코드 복사 코드는 다음과 같습니다.

View Code

表格排序

序号	书名	价格（元）	出版时间	印刷量（册）	IP
1	狼图腾	29.80	2009-10	50000	192.168.1.125
2	孝心不能等待	29.80	2009-09	800	192.68.1.125
3	藏地密码2	28.00	2008-10		192.102.0.12
4	藏地密码1	24.80	2008-10		215.34.126.10
5	设计模式之禅	69.00	2011-12		192.168.1.5
6	轻量级 Java EE 企业应用实战	99.00	2012-04	5000	192.358.1.125
7	Java 开发实战经典	79.80	2012-01	2000	192.168.1.25
8	Java Web 开发实战经典	69.80	2011-11	2500	215.168.54.125

tableSort.js 코드 목록:

코드 복사 코드는 다음과 같습니다.

코드 보기 
$(document).ready(function(){ 
var tableObject = $('#tableSort '); //id가 tableSort인 테이블 개체 가져오기 
var tbHead = tableObject.children('thead') //테이블 개체 아래의 광고 가져오기 
var tbHeadTh = tbHead.find('tr th') ;// tr 아래의 thead 
var tbBody = tableObject.children('tbody');//테이블 객체 아래의 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");//열 번호가 매개변수 인덱스인 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 아래의 모든 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; 
 >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 == "" ? 0 : value1 == " " ? 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] = 임시 
} 
} else { 
if (value1.localeCompare(value2) > 0) {//이 방법은 Google Chrome과 호환되지 않습니다. 
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를 정수로 변환
함수 ip2int( ip){ 
var num = 0; 
ip = ip.split(".") 
num = Number(ip[0]) * 256 * 256 * 256 Number(ip[1) ]) * 256 * 256 숫자(ip[2]) * 256 숫자(ip[3]); 
return num 
} 
}) 

 
실행 결과: 

 
네티즌 "Xia のHanfeng"에게 특별히 감사드립니다. "Xia のHanfeng"의 도움 없이는 Jquery 관련 작업을 완료하기 어려울 것입니다. 나는 여전히 이 효과에 매우 만족하지만 구현된 작업에서 문자열을 연결하는 과정은 약간 번거롭고 간단하고 명확하지 않으며 개선이 필요합니다. 