Bootstrap - Filterable Table에서 버튼으로 검색되게 하려면....
관련링크
본문
안녕하세요?
기초없이 코딩하다 보니.. 몇시간째 헤메에다 도저히 못찾겠어서, ㅠㅠ 이곳에 질문을 올려봅니다.
Bootstrap - Filterable Table에서 버튼, 혹은 드롭다운 선택으로 검색되게 하려면....
출처ㅣhttps://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_filters_table
테스트 작업중인 사이트: http://todo.kr/t1/sort1/
위 출처의 소스로 간단한 검색이 가능한 사이트를 작업중인데요, 검색창에 검색어를 직접 입력하면 바로바로 잘 찾아지는데, 여기서 '버튼'을 클릭하면 버튼의 텍스트가 검색창에 입력한 결과와 같이 바로 검색 결과가 뿌려지게 하는게 목적입니다.
가능한 방법이 분명히 있겠지요? ㅎ 제발 도움 좀.... ㅜㅜ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
<title>인물검색</title>
<meta name="theme-color" content="#077ed4">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div style="width:100%; padding:2px 0 5px 20px; background:#077ed4"><h3><font color="white">인물검색 Test</font></h3></div>
<div style="padding:20px 0 0 0; text-align:center">
<p>직접 입력, 혹은 버튼을 클릭하면 검색</p>
</div>
<br>
<center>
<input id="myInput" type="text" placeholder="Search..">
<br><br>
<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>
<br>
<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>
<br>
<div style="width:90%; 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>
<br>
<p>Sort Button Test</p>
</div>
</body>
</html>
위 사이트의 목적처럼, 간단히 데이터베이스를 만들고 불러내서 웹, 혹은 앱에서 사용하려면 어디부터 공부를 해야 할지.. 선배님들의 조언좀 부탁드립니다! (sql? mysql?을 배워야 되면 어디서부터, 어디에 있는 자료로 공부를 해야 하는지..;;)
답변 1
<form>
검색하고자 하는 내용과 버튼
</form>
기본부터 확인해 보세요.
기본부터 다 점검하고 적용하고 해 봤는데도 제 실력으로는 안되네요. ㅜㅜ
위 소스에서 검색창에 입력하는건 바로 검색이 되는데, 버튼이나 드롭다운 메뉴에서 선택하면 검색창 입력과 동일하게 검색이 되어야 하는데, 도무지 안먹네요. (기본 검색창 지우고, 드롭이나 버튼으로 적용해도 먹통;)
