JavaScript 정렬 HTML 표
우리는 종종 테이블을 대화 형으로 만들고 싶은 상황에 직면합니다. 열을 클릭하거나 다른 방법으로 정렬 할 수 있습니다. HTML에는 프로그래밍 기능이 없으므로 HTML 테이블을 정렬하려면 JavaScript를 사용해야합니다. 불행히도 배열을 정렬하는 데 도움이되는 내장 된 방법이 없습니다. 따라서 우리는 DOM 조작 기능과 비교 기능을 활용하는 커스텀 메소드를 작성합니다. 이 튜토리얼에서는 JavaScript를 사용하여 HTML 테이블을 정렬하는 방법을 설명합니다.
JavaScript를 사용하여 HTML 테이블 정렬
사용자 정의 메서드는 다음 두 도우미 함수를 사용하여 배열을 정렬합니다.
getCellValue()
테이블 행과 열 인덱스가 주어지면 셀에서 내용을 가져 오는 함수입니다.
테이블 행의 children 속성을 사용하여tr.children[i]를 사용하여ith열을 선택한 다음innerText또는textContent속성을 사용하여 실제 콘텐츠를 저장합니다. 셀에서 실제 내용을 가져 오면 사용자 지정 비교기를 사용하여 이러한 값을 비교하고 정렬 할 수 있습니다.
comparer()
주어진 테이블에서 두 요소의 값을 비교하는 함수입니다.
먼저 지정된 행 및 열 인덱스와 함께getCellValue()함수를 사용하여 셀의 내용을 가져옵니다. 그런 다음 둘 다 유효한 정수 또는 문자열인지 확인한 다음 비교하여 올바른 순서를 찾습니다.
연산
-
이벤트 리스너를 추가하여 테이블의 모든 헤더를 클릭 가능하게 만듭니다.
-
선택한 열에서 첫 번째 행을 제외한 모든 행을 찾습니다.
-
JavaScript의
sort()함수를comparer()와 함께 사용하여 요소를 정렬합니다. -
정렬 된 행을 다시 테이블에 삽입하여 최종 정렬 된 테이블을 출력으로 가져옵니다.
암호
const getCellValue = (tableRow, columnIndex) =>
tableRow.children[columnIndex].innerText ||
tableRow.children[columnIndex].textContent;
const comparer = (idx, asc) => (r1, r2) =>
((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
el1 - el2 :
el1.toString().localeCompare(el2))(
getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));
// do the work...
document.querySelectorAll('th').forEach(
th => th.addEventListener(
'click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(
Array.from(th.parentNode.children).indexOf(th),
this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
})));
모든 주요 브라우저는 위에서 설명한 모든 방법을 지원합니다.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn