如何使用javascript在HTML表中使用多个搜索栏

所以目前我得到了一个有2列和2个搜索栏的表，每个搜索栏只搜索特定的列。显然，由于我的2搜索栏使用了它们的特定功能，我无法同时使用2搜索栏进行搜索，因为如果我在名称中键入"Alexis"，然后在国家中键入"Germany"，则可以豁免，因为我使用的最后一个功能是"searchCountry"。所以我想知道它们是否是一种组合2函数或其他函数的方法，这样我就可以一起使用它们了。

function searchName() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function searchCountry() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

* {
box-sizing: border-box;
}
#myInput,
#myInput2 {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}

<input type="text" id="myInput" onkeyup="searchName()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="myInput2" onkeyup="searchCountry()" placeholder="Search for country.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>France</td>
</tr>
</table>

谢谢你的帮助。

尝试这个

function search() {
var inputName,
inputCountry,
filterName,
filterCountry,
table,
tr,
td,
i,
name,
country;
inputName = document.getElementById("myInput");
inputCountry = document.getElementById("myInput2");
filterName = inputName.value.toUpperCase();
filterCountry = inputCountry.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
td1 = tr[i].getElementsByTagName("td")[1];
if (td && td1) {
name = (td.textContent || td.innerText).toUpperCase();
country = (td1.textContent || td1.innerText).toUpperCase();
if (
name.indexOf(filterName) > -1 &&
country.indexOf(filterCountry) > -1
) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}

* {
box-sizing: border-box;
}
#myInput,
#myInput2 {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="myInput" onkeyup="search()" placeholder="Search for names.." title="Type in a name">
<input type="text" id="myInput2" onkeyup="search()" placeholder="Search for country.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>Germany</td>
</tr>
<tr>
<td>Alexis</td>
<td>France</td>
</tr>
</table>
<script src="script.js"></script>

</body>
</html>

相关内容

最新更新

热门标签：