JavaScript 연구 노트(4) 테이블 정렬

이 글에서 구현한 테이블 정렬은 대략 다음과 같은 단계로 나눌 수 있습니다.
1. 정렬할 모든 행을 가져와 해당 참조를 배열로 푸시합니다.
2. 조건에 따라 정렬할 행 배열 정렬 시 사용되는 비교 함수 작성
3. 모든 행 참조를 포함하는 배열 정렬
4. 정렬된 배열을 지정된 순서대로 DOM에 다시 작성하고 배열이 참조하는 행을 작성합니다. DOM으로 돌아가기

DOM을 사용하여 테이블을 조작하는 데 익숙하지 않은 경우 "DOM을 사용하여 브라우저 호환 테이블 작업 작성"을 참조하세요. 배열 정렬에 익숙하지 않은 경우 "Array Sorting and In The"를 참조하세요. 한자 정렬에서 localeCompare() 메소드 사용", 왜냐하면 DOM을 사용하여 테이블을 조작하고 배열 정렬이 테이블 정렬의 기본이기 때문입니다.
먼저 예제에 사용된 코드를 살펴보겠습니다. 이 기사에서는 위에서 언급한 단계에 따라 단계별로 분석합니다.
1 var asc = true; 2 var arrayTr = []; //정렬할 모든 항목 저장 3 Function Sorttable () {
4 // 정렬할 모든 행 가져오기
5 var Otable = document.GetelementByid ("Otable"); tBodies[0];
7 var allTr = oTBody.rows;
8 //정렬할 행을 배열에 넣어 정렬
9 for(var i=0;i10 arrayTr.push(allTr[i]);
11 }
12 //오름차순인 경우
13 if(asc){
14             arrayTr.sort(
15                oTable.rows[0].title = "내림차순으로 테이블을 정렬하려면 클릭하세요.";
16                  asc = false; 20 oTable.rows[0].title = "테이블을 오름차순으로 정렬하려면 클릭하세요.";
21 asc = true;
22 }
23 //계속 행 뒤에 숫자 순서가 다시 작성됩니다. DOM arrayTr[ j]);
27 }
28 oTBody.appendChild(oFragment); 먼저 HTML에서 및 길이 때문에 HTML 코드가 더 이상 표시되지 않습니다. 둘째, "javaScript Advanced 프로그래밍"에서는 Table의 tBodies 속성이 배열이 아니라 컬렉션이라고 말합니다. sort() 메서드를 사용하므로 직접 정렬에는 사용할 수 없습니다. 우리는 여전히 JS 컬렉션의 개념을 연구해야 하지만 이것이 이 기사의 초점이 아닙니다. 여기서 설명하고 싶은 것은 tBodies가 될 수 없다는 것입니다. 직접 정렬했습니다.
프로그램의 13~22행은 세 번째 단계를 구현합니다. 여기서는 두 번째 단계의 구체적인 구현을 숨깁니다(나중에 자세히 설명하겠습니다). 특정 메소드 구현으로 인해 프로그램에 대한 전반적인 이해가 없습니다. 또한 프로그램에서는 정렬된 행을 로드하기 위해 전역 컨테이너를 사용하므로 함수가 실행된 후 arrayTr에는 항상 마지막으로 정렬된 행 참조 시퀀스가 ​​포함됩니다. 배열을 역정렬할 필요 없이 reverse() 메소드만 호출하면 됩니다.
프로그램의 24번째 줄은 document.createDocumentFragment()를 사용하여 문서 조각을 가져옵니다. documentFragment는 불완전한 문서 개체로 주로 아직 DOM 트리에 추가되지 않은 요소를 저장하는 데 사용됩니다. DOM에서 js 작업을 위한 캐시로 사용하기가 매우 쉽습니다. DOM이 작동될 때마다 클라이언트가 다시 그릴 필요 없이 DOM의 변경 사항을 한 번에 표시합니다.
두 번째 단계를 구현하는 데 사용된 함수의 구체적인 구현을 살펴보겠습니다.
1 /**
2 * 비교 함수
3 * @param {Object} param1 비교할 1행
4 * @param {Object} param2 비교할 2행
5 * @return {Number} if param1 > ; param2는 1을 반환합니다
6 param1 == param2는 0을 반환합니다
7 param1 < param2가 -1을 반환하는 경우
8                       */
9 function CompareFunc(oTr1,oTr2){
10 var param1 = oTr1 .cells[0].childNodes[0].nodeValue;
11 var param2 = oTr2.cells[0].childNodes[0].nodeValue;
12 //두 매개변수가 모두 문자열 유형인 경우
13 if(isNaN(param1) && isNaN(param2)){
14 return param1.localeCompare(param2);
15 }
16 //매개변수 1이 숫자이고 매개변수 2가 문자열인 경우
17 if(!isNaN(param1) && isNaN(param2)){
18 return -1;
19 }
20 //매개변수 1이 문자열이면 매개변수 2는 숫자
21 if(isNaN(param1) && !isNaN(param2)){
22 return 1;
23 }
24 //두 매개변수가 모두 숫자인 경우
2 5    if(!isNaN( param1) && !isNaN(param2)){
26 if(Number(param1) > Number(param2)) return 1;
27 if(Number(param1) == Number(param2)) return 0; >28                                                                                                     if (숫자(매개변수 1) < Number (param2)) return -1; ) 메소드', 왜냐하면 10행과 11행에서 데이터를 가져오는 방법만 변경했기 때문입니다.
위에서 단일 열 테이블을 정렬하는 아이디어와 방법을 설명했습니다. 이러한 아이디어를 통해 프로그램을 쉽게 확장하여 더 많은 기능으로 테이블 정렬을 구현할 수 있습니다.

위는 JavaScript 학습노트(4)의 표 정렬 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!