다시 질문을 올려봅니다. Filterable Table의 드롭다운과 버튼 클릭으로 검색...
관련링크
본문
Bootstrap - Filterable Table에서 버튼, 혹은 드롭다운 선택 즉시 검색되게 하려면....
Filterable Table의 버튼 클릭으로 검색...해야 하는데
벌써 며칠째 소스를 찾는데 해결이 안되서 헤메다 질문을 다시 올려봅니다. ㅜㅜ
검색창에 검색어를 직접 입력하면 바로바로 잘 찾아지는데, 여기서 '드롭다운' 혹은 버튼'을 클릭하면 바로 검색이 되는 방법이 분명히 있을텐데요. form태그로 구글링 검색하기를 벌써 며칠째; 별의별 방법을 써도 해결이 안되네요. ;;
(아래 <!-- dropdown 검색 --> 과 드롭다운, 버튼은 중복사용이 안되는건지 궁금해지기까지;)
(참, 아래 드롭다운, 버튼 소스는 별의별 방법을 다 찾아도 해결이 안되어 원래 소스 그대로 복구한 상태이구요. 여기에 어떤 태그를 적용해야 위 목적대로 검색이 될 지 알려주시면 정말 감사하겠습니다!! )
<!-- 검색창 -->
<input id="myInput" type="text" placeholder="Search..">
<!-- dropdown 검색 -->
<form>
<div class="form-group" style="width:80%">
<label for="sel1">연도를 선택하세요</label>
<select class="form-control" id="sel1">
<option>선택</option>
<option>2020</option>
<option>2019</option>
<option>2018</option>
</select>
<br>
</div>
</form>
<!-- Button 클릭해서 검색 -->
<div style="width:100%; text-align:center">
<button type="button" class="btn btn-default" style="margin-bottom:5px">배우</button>
<button type="button" class="btn btn-default" style="margin-bottom:5px">가수</button>
<button type="button" class="btn btn-default" style="margin-bottom:5px">스포츠</button>
<button type="button" class="btn btn-default" style="margin-bottom:5px">골프</button>
<button type="button" class="btn btn-default" style="margin-bottom:5px">야구</button>
<button type="button" class="btn btn-default" style="margin-bottom:5px">모델</button>
</div>
ㅡㅡㅡㅡㅡㅡ
<!-- Data Table -->
<div style="width:70%; padding-left:8px">
<table>
<thead>
<tr>
<th>연도</th>
<th>이름</th>
<th>직업</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>2019</td>
<td>마동석</td>
<td>배우</td>
</tr>
<tr>
<td>2020</td>
<td>설운도</td>
<td>가수</td>
</tr>
<tr>
<td>2020</td>
<td>박찬호</td>
<td>스포츠/야구</td>
</tr>
<tr>
<td>2018</td>
<td>박세리</td>
<td>스포츠/골퍼</td>
</tr>
<tr>
<td>2020</td>
<td>이문세</td>
<td>가수</td>
</tr>
<tr>
<td>2018</td>
<td>홍진경</td>
<td>모델</td>
</tr>
<tr>
<td>2018</td>
<td>홍길동</td>
<td>의적</td>
</tr>
</tbody>
</table>
출처ㅣhttps://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table
테스트 작업중인 사이트: http://todo.kr/t1/sort1/
참고ㅣhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter
답변 1
<center>
<div style="width:90%">
<button type="button" value="2020" onclick="setFilter(this.value, 0)">2020</button>
<button type="text" value="마동석" onclick="setFilter(this.value, 1)">마동석</button>
<button type="text" value="가수" onclick="setFilter(this.value, 2)">가수</button>
</div>
<br>
<div style="width:90%">
<select onchange="setFilter(this.value, 0)">
<option value="" selected>연도로 검색</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select onchange="setFilter(this.value, 1)">
<option value="" selected>이름 검색</option>
<option value="마동석">마동석</option>
<option value="설운도">설운도</option>
<option value="박찬호">박찬호</option>
<option value="박세리">박세리</option>
<option value="이문세">이문세</option>
<option value="홍진경">홍진경</option>
<option value="홍길동">홍길동</option>
</select>
<select onchange="setFilter(this.value, 2)">
<option value="" selected>직업 검색</option>
<option value="배우">배우</option>
<option value="가수">가수</option>
<option value="모델">모델</option>
</select>
</div>
<br>
<input type="text" onkeyup="setFilter(this.value, 1)" placeholder="Search for names..." title="Type in a name">
<table id="myTable">
<thead>
<tr>
<th>연도</th>
<th>이름</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr data-year="2020">
<td>2020</td>
<td>마동석</td>
<td>배우</td>
</tr>
<tr data-year="마동석">
<td>2020</td>
<td>마동석</td>
<td>배우</td>
</tr>
<tr data-year="배우">
<td>2020</td>
<td>마동석</td>
<td>배우</td>
</tr>
<tr data-year="2019">
<td>2019</td>
<td>설운도</td>
<td>가수</td>
</tr>
<tr data-year="2018">
<td>2018</td>
<td>박찬호</td>
<td>스포츠/야구</td>
</tr>
<tr data-year="2018">
<td>2018</td>
<td>박세리</td>
<td>스포츠/골퍼</td>
</tr>
<tr data-year="2020">
<td>2020</td>
<td>이문세</td>
<td>가수</td>
</tr>
<tr data-year="2018">
<td>2018</td>
<td>홍진경</td>
<td>모델</td>
</tr>
<tr data-year="2020">
<td>2020</td>
<td>홍길동</td>
<td>의적</td>
</tr>
</tbody>
</table>
</center>
<script>
function setFilter(search_str, search_col) {
var input, filter, table, tr, td, i;
//input = document.getElementById("myInput");
//filter = input.value.toUpperCase();
filter = search_str.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
console.log(tr.length);
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[search_col];
if (td) {
console.log(filter + td.innerHTML);
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>