테이블에서 동적으로 데이터 검색해 테이블 조회(filter) 및 검색어 하이라이트(highlight)

테이블에서 동적으로 데이터 검색해 테이블 조회(filter) 및 검색어 하이라이트(highlight)

소스예제
검색 초기화 (Caps On) No. 이름 연락처 기타 1 홍길동 010-1234-1234 홍길동은 홍 판서의 아들이면서도 그를 아버지라고 부르지 못했어요 2 이모지 010-1111-2222 이모티콘 3 천궁 010-8888-1234 천궁은 혈액순환을 개선하고 두통을 완화하는 데 효과적인 한방 약재 4 박장군 010-0000-0123 박장군 5 알고리즘 010-0101-0000 주어진 문제를 해결하기 위한 명확하고 체계적인 절차, 방법 또는 순서 6 사과 - 사과는 맛있어!

Tag And Script

<style>
.search-box{position: relative; background-color: #f5f5f5; color: #333; padding: 9px; margin: 0 0 10px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px;}
.search-box .btn{border: 1px solid #ccc; margin: 0 3px;}
.search-box .btn.btn_search_reset{background-color: #ff0080; color: #fff;}
.search-box .btn.btn-none{display: none;}
.search-box .Caps_Lock_state{position: relative; margin: 0 5px; color: #0080ff; font-weight: bold; display: none;}
.search-box .search_count_info{position: relative;}
.search-box .search_count_info strong{color: red !important;}
table.table-search { clear: both; width: 100%; border-collapse: collapse; border-spacing: 0 }
table.table-search thead th { background: #6f809a; color: #fff; display: table-row; border: 1px solid #60718b; font-weight: normal; text-align: center; padding: 8px 5px; font-size: 0.92em }
table.table-search tbody th { border: 1px solid #d6dce7; padding: 5px; text-align: center; }
table.table-search tbody tr:nth-child(even) { background: #eff3f9 }
table.table-search tbody tr.tr-none {display: none;}
table.table-search tbody td { border: 1px solid #d6dce7; padding: 5px; text-align: left; width: unset; }
table.table-search tbody td.no { text-align: center; background: #e8e8e8; width: 40px; }
</style>

<div class="search-box">
	<input type="text" id="searchInput" class="frm_input" placeholder="검색"/> 
	<button type="button" class="btn btn_search">검색</button>
	<button type="button" class="btn btn_search_reset btn-none">초기화</button>
	<span class="Caps_Lock_state">(Caps On)</span>
	<span class="search_count_info"></span>
</div>
<table class="ex-table table-search">
	<thead>
	  <tr>
		 <th nowrap>No.</th>
		 <th nowrap>이름</th>
		 <th nowrap>연락처</th>
		 <th nowrap>기타</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
		<td class="no" style="width:30px;" nowrap>1</td>
		<td class="search">홍길동</td>
		<td class="search">010-1234-1234</td>
		<td class="search">홍길동은 홍 판서의 아들이면서도 그를 아버지라고 부르지 못했어요</td>
	  </tr>
	  <tr>
		<td class="no" style="width:30px;" nowrap>2</td>
		<td class="search">이모지</td>
		<td class="search">010-1111-2222</td>
		<td class="search">이모티콘</td>
	  </tr>
	  <tr>
		<td class="no" style="width:30px;" nowrap>3</td>
		<td class="search">천궁</td>
		<td class="search">010-8888-1234</td>
		<td class="search">천궁은 혈액순환을 개선하고 두통을 완화하는 데 효과적인 한방 약재</td>
	  </tr>
	  <tr>
		<td class="no" style="width:30px;" nowrap>4</td>
		<td class="search">박장군</td>
		<td class="search">010-0000-0123</td>
		<td class="search">박장군</td>
	  </tr>
	  <tr>
		<td class="no" style="width:30px;" nowrap>5</td>
		<td class="search">알고리즘</td>
		<td class="search">010-0101-0000</td>
		<td class="search">주어진 문제를 해결하기 위한 명확하고 체계적인 절차, 방법 또는 순서</td>
	  </tr>
	  <tr>
		<td class="no" style="width:30px;" nowrap>6</td>
		<td class="search">사과</td>
		<td class="search">-</td>
		<td class="search">사과는 맛있어!</td>
	  </tr>
	</tbody>
</table>

<script>
$(function(e){
	$(document).on('click', '.search-box .btn_search', function(e){ 
		var sValue = $.trim( $('.search-box #searchInput').val() );
		var filter_idx, visibleRowCount;
		var td_colspan = $('table.table-search tbody tr:eq(0) td').length;
		var tr_empty_append_tag = '<tr class="tr_search_empty"><td colspan="'+td_colspan+'" style="height: 50px; line-height:50px; text-align: center; color: red;">데이타가 없습니다.</td></tr>';
		$('table.table-search tbody tr.tr_search_empty').remove();
		$('table.table-search tbody tr').removeClass('tr-none');
		if(sValue) {
			filter_idx = 0;
			visibleRowCount = 0;
			$('table.table-search tbody tr').filter(function(e) {
				var tr_item = this;
				var textContent = $(tr_item).find('td.search').text().toLowerCase(); // td.search 내의 요소들만 검색
				//var allContent = $(tr_item).text().toLowerCase(); // 전체 요소 검색시
				// $(this).toggle($(this).text().toLowerCase().indexOf(sValue) > -1); // 일반적

				$(tr_item).find('td span.highlight').contents().unwrap(); // 기존 하이라이트 제거 (unwrap)

				if(textContent.indexOf(sValue) == -1) { // 값이 없을때 -1 반환
					$(tr_item).addClass('tr-none'); // tr 숨김

				} else { // 검색어가 있을때
					$(tr_item).find('td.no').html((visibleRowCount + 1));
					var td_text = $(tr_item).find('td').text();

					if (td_text.includes(sValue)) {
						$(tr_item).find("td.search:contains('"+sValue+"')").each(function () {
							var regex = new RegExp("("+sValue+")", "gi");// 정규식 생성 (g: 전체, i: 대소문자 무시)
							var regex_str = '<span class="highlight" style="background-color:yellow; color: red;">$1</span>';
							$(this).html( $(this).text().replace(regex, regex_str) );// 내용 치환 : 하이라이트
						});
					}
					visibleRowCount++;
				}
			});
			if(visibleRowCount == 0) { $('table.table-search tbody').append(tr_empty_append_tag); }
			$('.search-box .btn_search_reset').removeClass('btn-none');
			$('.search-box .search_count_info').html('( <strong>'+visibleRowCount+'</strong>건 조회 )');
		}
	});

	$(document).on('click', '.btn_search_reset', function(e){ 
		$('.search-box #searchInput').val('');
		$('.search-box .search_count_info').html('');
		$('table.table-search tbody tr').each(function (index, tr_item) {
			$(tr_item).removeClass('tr-none');
			$(tr_item).find('td span.highlight').contents().unwrap(); // 기존 하이라이트 제거 (unwrap)
			$(tr_item).find('td.no').html((index + 1));
		});
		$(this).addClass('btn-none');
	});

	$(document).on('keydown', '.search-box #searchInput', function(e){ 
		if ( e.originalEvent.getModifierState('CapsLock') ) {
			$('.search-box .Caps_Lock_state').show();
		} else {
			$('.search-box .Caps_Lock_state').hide();
		}
		if (e.key === 'Enter') {
			$('.search-box .btn_search').click();
			e.preventDefault();
		}
	});
});
</script>