키워드를 사용하여 검색 할 수있는 테이블이 있지만 필터링의 일부가 될 드롭 다운 상자도 포함하고 싶습니다. 아래는 내 코드입니다. 드롭 다운에서 상태를 선택하여 상태를 필터링 할 수 있지만 키워드를 입력하자마자 모든 상태로 되돌아갑니다. 먼저 드롭 파종을 사용하여 주별로 필터링 한 다음 해당 주에 대해서만 키워드를 사용하고 싶습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>States</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="container">
<div id="Header">
</div>
<div id="MainBody">
<h2>Search</h2>
<input type="text" id="myInputJob" onkeyup="myFunction()" placeholder="" title="Type Here">
<select id="StateDropdown" oninput="filterTable()">
<option>All</option>
<option>CA</option>
<option>WA</option>
</select>
<div id="TableJob">
<table id="myTableJob">
<tr class="header">
<th>City</th>
<th>State</th>
<th>Keyword1</th>
<th>Keyword2</th></tr>
<tr><td>San Francisco</td><td>CA</td><td>Blue</td><td>Red</td></tr>
<tr><td>San Diego</td><td>CA</td><td>Blue</td><td>Red</td></tr>
<tr><td>Seattle</td><td>WA</td><td>Blue</td><td>Red</td></tr>
<tr><td>Salt Lake City</td><td>UT</td><td>Blue</td><td>Red</td></tr>
<tr><td>Las Vegas</td><td>NV</td><td>Blue</td><td>Red</td></tr>
</table>
</div>
</div>
</body>
</html>
JS
<script>
function myFunction(event) {
var input, filter, table, tr, td, i;
input = document.getElementById("myInputJob");
filter = input.value.toUpperCase();
table = document.getElementById("myTableJob");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
table.style.display = ""
if (document.getElementById('myInputJob').value == '') {
table.style.display = "";
} else {
table.style.display = "";
}
td_1 = tr[i].getElementsByTagName("td")[2];
td_2 = tr[i].getElementsByTagName("td")[3];
td_3 = tr[i].getElementsByTagName("td")[1];
if (td_1 || td_2) {
if (td_1.innerHTML.toUpperCase().indexOf(filter) == 0 || td_2.innerHTML.toUpperCase().indexOf(filter) == 0 && td_3.innerHTML == document.getElementById("StateDropdown").innerHTML) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function filterTable() {
let dropdown, table, rows, cells, state, filter;
dropdown = document.getElementById("StateDropdown");
table = document.getElementById("myTableJob");
rows = table.getElementsByTagName("tr");
filter = dropdown.value;
for (let row of rows) {
cells = row.getElementsByTagName("td");
state = cells[1] || null;
if (filter === "All" || !state || (filter === state.textContent)) {
row.style.display = "";
}
else {
row.style.display = "none";
}
}
}
</script>
나는 거기에 AND 조건을 넣어야 할 것 같습니다.
if (td_1.innerHTML.toUpperCase (). indexOf (filter) == 0 || td_2.innerHTML.toUpperCase (). indexOf (filter) == 0 && td_3.innerHTML == document.getElementById ( "StateDropdown"). innerHTML ) { 하지만 작동하지 않습니다. 정말 고마워!
쉬운 방법은 다음과 같습니다.
두 함수 모두에서 해당 변수를 사용할 수 있도록이 두 함수를 선언 var tr하고 table외부에서 사용할 수 있습니다.
var table = document.getElementById("myTableJob");
var tr=table.querySelectorAll('tr');
당신이 상태를 검색 할 때 그것은 필터링 trs하고 unwonted를로 설정합니다 display none. 그래서 state search 후에 tr는 마지막에 보이는 사람들 만 저장 합니다.function filterTable()
tr = table.querySelectorAll('tr:not([style="display: none;"])');
이제 함수 myFunction(event)는 이미 필터링 된 (필터링 된 경우) 만 사용합니다 trs.
BTW 귀하의 Keyword2 검색이 전혀 작동하지 않지만 그것은 질문이 아닙니다.
var table = document.getElementById("myTableJob");
var tr = table.querySelectorAll('tr');
function myFunction(event) {
var input, filter, td, i;
input = document.getElementById("myInputJob");
filter = input.value.toUpperCase();
for (i = 0; i < tr.length; i++) {
table.style.display = ""
if (document.getElementById('myInputJob').value == '') {
table.style.display = "";
} else {
table.style.display = "";
}
td_1 = tr[i].getElementsByTagName("td")[2];
td_2 = tr[i].getElementsByTagName("td")[3];
td_3 = tr[i].getElementsByTagName("td")[1];
if (td_1 || td_2) {
if (td_1.innerHTML.toUpperCase().indexOf(filter) == 0 || td_2.innerHTML.toUpperCase().indexOf(filter) == 0 && td_3.innerHTML == document.getElementById("StateDropdown").innerHTML) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function filterTable() {
let dropdown, rows, cells, state, filter;
dropdown = document.getElementById("StateDropdown");
rows = table.getElementsByTagName("tr");
filter = dropdown.value;
for (let row of rows) {
cells = row.getElementsByTagName("td");
state = cells[1] || null;
if (filter === "All" || !state || (filter === state.textContent)) {
row.style.display = "";
}
else {
row.style.display = "none";
}
}
tr = table.querySelectorAll('tr:not([style="display: none;"])');
}<div id="container">
<div id="Header">
</div>
<div id="MainBody">
<h2>Search</h2>
<input type="text" id="myInputJob" onkeyup="myFunction()" placeholder="" title="Type Here">
<select id="StateDropdown" oninput="filterTable()">
<option>All</option>
<option>CA</option>
<option>WA</option>
</select>
<div id="TableJob">
<table id="myTableJob">
<tr class="header">
<th>City</th>
<th>State</th>
<th>Keyword1</th>
<th>Keyword2</th>
</tr>
<tr>
<td>San Francisco</td>
<td>CA</td>
<td>Gray</td>
<td>Red</td>
</tr>
<tr>
<td>San Diego</td>
<td>CA</td>
<td>Blue</td>
<td>Red</td>
</tr>
<tr>
<td>Seattle</td>
<td>WA</td>
<td>Blue</td>
<td>Red</td>
</tr>
<tr>
<td>Salt Lake City</td>
<td>UT</td>
<td>Blue</td>
<td>Red</td>
</tr>
<tr>
<td>Las Vegas</td>
<td>NV</td>
<td>Blue</td>
<td>Pink</td>
</tr>
</table>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다