화면에 출력되는 Table 데이터를 Filtering 하여 보여주는 jQuery 코드 예제다.
화면에 이미 출력된 데이터 중에서 Filtering 한다고 보면 된다.
테스트에 사용한 코드는
jQuery_TableFiltering-01.php
테이블 필터링 예제는 https://www.jqueryscript.net/demo/jQuery-Plugin-To-Filter-Rows-Of-An-Html-Table-Table-Filtering/ 등 검색하면 많이 나온다.
위와 같은 테이블에서 검색어를 입력하면 해당 검색어를 포함하는 리스트만 출력하는 jQuery 에 대해 정리해둔다.
$(document).ready(function() {
$("#mykeyword").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable_tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
}); |
위 jQuery 코드는 테이블내에 일치하는 모든 결과를 출력한다. (번호열 검색 제외)
단, 한글을 검색하는 경우에는 즉각적으로 표시되지 않으므로 입력한 엔터키를 한번 눌러야 한다.
- keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 요소에 이벤트를 발생시킨다.
- $("#mykeyword").on("keyup", function() {} 또는 $("#mykeyword").keyup(function() {} 으로 해도 된다.
- toLowerCase() : 문자열에서 영문 대문자를 모두 소문자로 바꾼다.
- indexOf("찾을 문자") : 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환한다. 만일 찾는 문자가 없다면 -1 을 반환한다.
$(document).ready(function() {
$("#mykeyword").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable > tbody > tr").hide();
var temp = $("#myTable > tbody > tr > td:nth-child(5n+4):contains('" + value + "')");
$(temp).parent().show();
});
}); |
Using a formula (an + b) : a 는 테이블의 칼럼 갯수라고 보면 된다. b 는 1부터 시작한다.
td:nth-child(5n+4) : 칼럼 갯수가 5개인 테이블에서 4번째 즉 학과에 대한 검색결과를 출력한다.
5n + 1 로 변경하고 검색(Filtering)하면 번호열 검색결과를 반환한다.
CSS 에
#myTable > tbody > tr td:nth-child(5n-1) {
align: right;
text-align: right;
}
를 추가해보면 테이블 정렬이 어떻게 되는지 확인할 수 있다.
-1 은 오른쪽부터 0, -1, -2 라고 보면 된다.
5n 대신에 2n, 3n, 4n 등으로 숫자를 변경해보면 어떻게 변하는지 확인할 수 있다.
첨부파일 코드 내용
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#mykeyword").keyup(function() {
var value = $(this).val().toLowerCase();
$("#myTable_tbody tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
// $("#myTable > tbody > tr").hide();
// var temp = $("#myTable > tbody > tr > td:nth-child(5n+4):contains('" + value + "')");
// $(temp).parent().show();
});
});
</script>
<style>
#container {width: 900px; margin: 0 auto;}
#myTable {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
}
#myTable td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
#myTable tr {border-bottom: 1px solid #ddd;}
#myTable tr:nth-child(even) {
background-color: #f1f1f1;
}
#myTable > tbody > tr td:nth-child(5n) {
align: right;
text-align: right;
}
#myTable > thead > tr { background-color: #ddee33; color:#000fff; }
#myTable > tbody > tr:hover { background-color: #d1f1f1; }
</style>
</head>
<body>
<div id="container">
<h2>Filterable Table</h2>
<input type="text" id="mykeyword" placeholder="검색어를 입력하세요">
<br>
<br>
<table id='myTable'>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>생년월일</th>
<th>학과</th>
<th>학번</th>
</tr>
</thead>
<tbody id="myTable_tbody">
<tr>
<td>1</td>
<td>박진희</td>
<td>1991.09.07</td>
<td>경영정보학과</td>
<td>2014290031</td>
</tr>
<tr>
<td>2</td>
<td>김보연</td>
<td>1991.07.07</td>
<td>경영학과</td>
<td>2016290032</td>
</tr>
<tr>
<td>3</td>
<td>하석진</td>
<td>1991.05.15</td>
<td>사회학과</td>
<td>2017290033</td>
</tr>
<tr>
<td>4</td>
<td>유희열</td>
<td>1991.08.07</td>
<td>건축학과</td>
<td>2011290038</td>
</tr>
<tr>
<td>5</td>
<td>송승헌</td>
<td>1989.04.07</td>
<td>물리학과</td>
<td>2011290039</td>
</tr>
<tr>
<td>6</td>
<td>김태희</td>
<td>1988.02.07</td>
<td>의류학과</td>
<td>2010290040</td>
</tr>
<tr>
<td>7</td>
<td>정지훈</td>
<td>1988.07.25</td>
<td>식품학과</td>
<td>2012290042</td>
</tr>
<tr>
<td>8</td>
<td>박진영</td>
<td>1981.02.07</td>
<td>영어영문학과</td>
<td>2015290031</td>
</tr>
<tr>
<td>9</td>
<td>양현석</td>
<td>1993.09.07</td>
<td>역사학과</td>
<td>2017290055</td>
</tr>
<tr>
<td>10</td>
<td>유재석</td>
<td>1995.09.07</td>
<td>경영정보학과</td>
<td>2013290056</td>
</tr>
<tr>
<td>11</td>
<td>고아라</td>
<td>1993.09.07</td>
<td>역사학과</td>
<td>2017290060</td>
</tr>
</tbody>
</table>
<p>테이블 헤더 검색을 방지하기 위해 tbody 내에서 검색 시작</p>
</div>
</body>
</html>
|
