[jQuery] 테이블에서 동적으로 데이터 검색해 테이블 조회

jQuery-ui.js 이용

 

 

jsp

<div>
  <input type="text" id="searchInput" placeholder="이름/나이/전화번호 검색"/> 
  <table id="personInfoTable">
    <thead>
      <tr>
         <th>No.</th>
         <th>이름</th>
         <th>나이</th>
         <th>전화번호</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="search">홍길동</td>
        <td class="search">30</td>
        <td class="search">010-1234-1234</td>
      </tr>
      <tr>
        <td>2</td>
        <td class="search">임꺽정</td>
        <td class="search">25</td>
        <td class="search">010-2222-2222</td>
      </tr>
      <tr>
        <td>3</td>
        <td class="search">이몽룡</td>
        <td class="search">17</td>
        <td class="search">010-8888-1234</td>
      </tr>
    </tbody>
  </table>
</div>

js

$("#searchInput").on('change keyup paste', function() { 
  var currentVal = $.trim($(this).val());
  $('#personInfoTable > tr').hide();
  var temp = $('#personInfoTable > tr > td.search:contains("' + currentVal + '")');
  $(temp).parent().show(); 
});

 

js 설명

change로 input값이 변경될때 이벤트 발생

keyup로 키보드로 입력을 할때마다 동적으로 테이블을 보여준다.

paste로 붙여넣기를 했을 경우도 이벤트 발생

 

$.trim(): input text 양쪽 공백 제거

$().hide(): 테이블 아래 데이터를 모두 숨긴다음 show로 원하는 컬럼만 보여준다.

 

특정 컬럼 검색 방법

td에 classs="search"를 추가했다. 그리고js에서 td.search로 검색하여 search가 적혀 있는 td만 검색되도록 했다.

저렇게 No.만 빼고 search를 넣으면 search가 적힌 컬럼만 검색이된다.

 

 

 

 

 

도움이 되셨다면 아래 ♡ 눌러주세요 (로그인 필요 없습니당)