이 블로그 게시물은 JavaScript에서 테이블을 필터링하는 프로세스를 정의합니다.
JavaScript에서 테이블을 필터링하는 방법은 무엇입니까?
JavaScript에서 테이블을 필터링하는 방법을 설명하는 예를 살펴보겠습니다.
예시
먼저 HTML 문서에 ' 온키업 '를 호출하는 속성 filterTableFunc() ” 키를 놓을 때:
< 입력 유형 = '텍스트' ID = '검색' 온키업 = 'filterTableFunc()' 자리 표시자 = '검색.....' >< br >< br >
다음을 사용하여 직원 데이터를 저장하는 테이블을 만듭니다. <테이블> 태그를 지정하고 id를 할당합니다. 직원 데이터 ”:
< 테이블 ID = '직원 데이터' 국경 = '1' >
< 트 >
< 일 > 이름 일 >
< 일 > 이메일 일 >
< 일 > 성별 일 >
< 일 > 지정 일 >
< 일 > 입사일 일 >
트 >
< 트 >
< td > 남자 td >
< td > 남자 @ gmail. ~와 함께 td >
< td > 남성 td >
< td > 공인회계사 td >
< td > 5 / 5 / 2020년 td >
트 >
< 트 >
< td > 스티븐 td >
< td > 스티븐 @ gmail. ~와 함께 td >
< td > 남성 td >
< td > HRM td >
< td > 이십 일 / 10 / 2020년 td >
트 >
< 트 >
< td > 큰 td >
< td > 마리78 @ gmail. ~와 함께 td >
< td > 여성 td >
< td > HRM td >
< td > 16 / 05 / 2022년 td >
트 >
< 트 >
< td > 론다 td >
< td > 론다12 @ 핫메일. ~와 함께 td >
< td > 남성 td >
< td > CFA td >
< td > 23 / 06 / 2022년 td >
트 >
테이블 >
HTML 파일을 실행한 후 출력은 다음과 같습니다.
그런 다음 필터 테이블에 기능을 추가해 보겠습니다. JavaScript 스크립트 파일 또는 태그에서 검색을 기반으로 테이블의 데이터를 필터링하는 아래 코드를 사용합니다.
기능 filterTableFunc ( ) {~였다 필터 결과 = 문서. getElementById ( '검색' ) . 값 . 대소문자 ( ) ;
~였다 empTable = 문서. getElementById ( '직원 데이터' ) ;
~였다 트 = empTable. getElementsByTagName ( '트' ) ;
~을 위한 ( ~였다 나 = 1 ; 나 < tr. 길이 ; 나 ++ ) {
트 [ 나 ] . 스타일 . 표시하다 = '없음' ;
const tdArray = 트 [ 나 ] . getElementsByTagName ( 'td' ) ;
~을 위한 ( ~였다 제이 = 0 ; 제이 - 1 ) {
트 [ 나 ] . 스타일 . 표시하다 = '' ;
부서지다 ;
}
}
}
}
위에 주어진 코드에서:
- 먼저 ' filterTableFunc() '.
- ID '를 사용하여 검색 창에 액세스 검색 ”를 사용하여 입력된 값을 가져와서 소문자로 변환합니다. toLowerCase() ' 방법.
- 해당 ID를 사용하여 필터 작업이 수행될 테이블에 대한 참조를 가져옵니다. 직원 데이터 '.
- 그런 다음 '를 사용하여 테이블 행을 가져옵니다. getElementsByTagName ' 방법.
- 길이까지 테이블을 반복하고 각 테이블 항목에 대한 데이터를 가져오고 테이블의 저장된 값이 검색된 값과 동일한지 확인합니다. 그렇다면 표시하십시오.
산출
위의 출력은 필터 작업이 테이블에 성공적으로 적용되었음을 나타냅니다.
결론
테이블 데이터를 반복하고 관련 데이터를 반환하여 JavaScript에서 테이블을 필터링할 수 있습니다. 이 필터링은 특정 이벤트에 대해 호출되는 함수를 통해 수행됩니다. 이 접근 방식은 입력된 동일한 데이터에 대해 입력 텍스트 필드의 대소문자 구분에 관계없이 테이블의 해당 데이터를 가져오는 방식으로 작동합니다. 이 게시물은 JavaScript에서 테이블을 필터링하는 데 사용할 수 있는 접근 방식을 설명합니다.