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

프런트 엔드에는 테이블 정렬을 위한 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 관련 작업을 완료하기 어려울 것입니다. 나는 여전히 이 효과에 매우 만족하지만 구현된 작업에서 문자열을 연결하는 과정은 약간 번거롭고 간단하고 명확하지 않으며 개선이 필요합니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.