<DIV> 태그로 만든 테이블에 jQuery contains() 메서드를 사용하여 검색 기능 설정하는 방법

카테고리 없음

by 블랙캣 2023. 12. 4. 20:30

728x90

간혹 웹 페이지를 만들어야하는 업무를 할때가 있는데 기존에 <table>, <tr>, <td> 태그를 사용하여 제작된 페이지를 <div> 태그로 변환하는 작업을 하게되었습니다.

<div> 태그로 재구성한 테이블에 검색 기능을 구현하기 위해 구글링하다 jQuery 에 있는 contains() 메서드를 사용하면 검색할 문자열을 포함하고 있는 요소를 선택하여 속성값을 제어하여 보여주거나 숨길 수 있다는 정보를 확인하고 예제 코드를 수정하여 적용 했습니다.

<script type="text/javascript">
$(document).ready(function() {
  $("#str").keyup(function() {
    var key = $(this).val();
      $("#table_list > div").hide();
        var temp = $("#table_list > div > div:contains('" + key + "')");
          $(temp).parent().show();
  })
})
</script>

자바스크립트 코드를 웹페이지 안에 바로 넣거나 js 파일 형태로 외부참조 하면 됩니다.

코드를 풀어서 설명해보면 검색 입력을 받을 ID 가 "str" 인 INPUT 박스에 키보드 입력이 있으면 검색 루틴이 실행되고 입력된 값을 "key" 변수에 저장합니다.

그리고 ID 가 "table_list"인 <DIV> 태그로 묶인 자식 <div> 항목들을 모두 숨기고(hide) "key" 변수에 저장된 값과 일치하는 항목이 있는 경우 보여(show)줍니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"> </script>

contains() 메서드는 jQuery 에 들어있으므로 <head></head> 태그 사이에 위에 있는 코드를 추가해야 작동 합니다.

아래 코드는 <div> 태그를 사용하여 만든 테이블 입니다.

<div class="cotainer">
  <div class="wrap">검색 : <input class="text_box" type="text" id="str"></div>
  <div class="wrap">
    <div class="div_table">
      <div class="div_title">날짜</div>
      <div class="div_title">품목코드</div>
      <div class="div_title">제품명</div>
      <div class="div_title">수량</div>
    </div>
  </div>
  <div class="wrap" id="table_list"> 
    <div class="div_table">
      <div class='div_item'>2023.01.01</div>
      <div class='div_item'>SN0023456</div>
      <div class='div_item'>바코드프린터</div>
      <div class='div_item'>1ea</div>
    </div>
    <div class="div_table">
      <div class='div_item'>2023.02.02</div>
      <div class='div_item'>SN0034567</div>
      <div class='div_item'>칼라라벨프린터</div>
      <div class='div_item'>2ea</div>
    </div>
    <div class="div_table">
      <div class='div_item'>2023.03.03</div>
      <div class='div_item'>SN0045678</div>
      <div class='div_item'>EPSON CW-C4040</div>
      <div class='div_item'>3ea</div>
    </div>
    <div class="div_table">
      <div class='div_item'>2023.04.04</div>
      <div class='div_item'>SN0056789</div>
      <div class='div_item'>CITIZEN CL-S700</div>
      <div class='div_item'>4ea</div>
    </div>
    <div class="div_table">
      <div class='div_item'>2023.05.05</div>
      <div class='div_item'>SN006789A</div>
      <div class='div_item'>CITIZEN CL-E720</div>
      <div class='div_item'>5ea</div>
    </div> 
  </div>
</div>

페이지에 적용한 CSS 코드 입니다.

<style>
.container {width: 100%;}
.wrap {width: 50%;}
.div_table {display: table; width:100%;}
.text_box{background-color: #d8e9fa5b; border: 1px solid #ced4da; width: 50%; height:20px; margin-bottom:5px;}
.div_title {display: table-cell; width: 20%;text-align:center; background-color: #d3dceb;border: 1px solid #ced4da; font-weight: 600;}
.div_item {display: table-cell; width: 20%; text-align:center; background-color: #FFF; border: 1px solid #ced4da;}
</style>