Filter Table in HTML

[Filter Table in HTML]

Table 리스트에서  해당 열에 대한 원하는 값만 Filtering 하도록 구현한다.

InterfaceID Sender Receiver  

No	InterfaceID	Sender	Receiver
1	1000	MySystem	Google
2	2000	MySystem	Naver
3	3000	Kakao	MySystem
4	4000	Amzon	MySystem

 

1. 샘플 Table list

샘플 Table list 작성한다.

<table id="myTable"  width="30%">
	<tr>
		<th>No</th>
		<th>InterfaceID</th>
		<th>Sender</th>
		<th>Receiver</th>
	</tr>
	<tr>
		<td>1</td>
		<td>1000</td>
		<td>MySystem</td>
		<td>Google</td>
	</tr>
	<tr>
		<td>2</td>
		<td>2000</td>
		<td>MySystem</td>
		<td>Naver</td>
	</tr>
	<tr>
		<td>3</td>
		<td>3000</td>
		<td>Kakao</td>
		<td>MySystem</td>
	</tr>
	<tr>
		<td>4</td>
		<td>4000</td>
		<td>Amzon</td>
		<td>MySystem</td>
	</tr>
</table>

 

2. Table 스타일 정의

Table 테두리, 글자크기 정의한다.

<style>
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
  }
</style>

3. 검색 목록

검색할 목록을 정의한다.

<select id="mySelect">
	<option value="1" selected>InterfaceID</option>
	<option value="2">Sender</option>
	<option value="3">Receiver</option>
</select>

 

 

4. 입력화면 (Filtering)

Filtering 입력 화면을 정의한다.

<input type="text"  id="myInput" onkeyup="myFunction()" placeholder="Search for Interface" size="20">

 

5. Javascript 구현

Filtering을 위한 Javascript 구현한다.

<script language=javascript>
	function myFunction() {
	  var input, filter, table, tr, td, i, txtValue;

	  var x = document.getElementById("mySelect").value;

	  input = document.getElementById("myInput");
	  filter = input.value.toUpperCase();
	  table = document.getElementById("myTable");
	  tr = table.getElementsByTagName("tr");
	  for (i = 0; i < tr.length; i++) {
		td = tr[i].getElementsByTagName("td")[x];
		if (td) {
		  txtValue = td.textContent || td.innerText;
		  if (txtValue.toUpperCase().indexOf(filter) > -1) {
			tr[i].style.display = "";
		  } else {
			tr[i].style.display = "none";
		  }
		}       
	  }
	}
</script>

 

728x90