我有一个包含三列的 HTML 表 - （姓名、年龄、城市）。我正在尝试实现类似“MS Excel”的功能，我可以在其中过滤多个列。
尽管过滤器是单独工作的，但当用户同时在多个输入字段中输入文本时，它们会发生故障。例如，仅输入名称即可正常工作，但输入名称和城市将完全排除名称过滤器。
function nameSearch() {
var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;
input_name = document.getElementById("name-search");
input_age = document.getElementById("age-search");
input_city = document.getElementById("city-search");
filter_name = input_name.value.toUpperCase();
filter_age = input_age.value.toUpperCase();
filter_city = input_city.value.toUpperCase();
table = document.getElementById("custom-table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td_name = tr[i].getElementsByTagName("td")[0];
if (td_name) {
txtValue_name = td_name.textContent || td_name.innerText;
if (txtValue_name.toUpperCase().indexOf(filter_name) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function ageSearch() {
var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;
input_name = document.getElementById("name-search");
input_age = document.getElementById("age-search");
input_city = document.getElementById("city-search");
filter_name = input_name.value.toUpperCase();
filter_age = input_age.value.toUpperCase();
filter_city = input_city.value.toUpperCase();
table = document.getElementById("custom-table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td_age = tr[i].getElementsByTagName("td")[1];
if (td_age) {
txtValue_age = td_age.textContent || td_age.innerText;
if (txtValue_age.toUpperCase().indexOf(filter_age) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function citySearch() {
var input_name, input_age, input_city, filter, table, tr, td, i, txtValue_name, txtValue_age, txtValue_city;
input_name = document.getElementById("name-search");
input_age = document.getElementById("age-search");
input_city = document.getElementById("city-search");
filter_name = input_name.value.toUpperCase();
filter_age = input_age.value.toUpperCase();
filter_city = input_city.value.toUpperCase();
table = document.getElementById("custom-table");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td_city = tr[i].getElementsByTagName("td")[2];
if (td_city) {
txtValue_city = td_city.textContent || td_city.innerText;
if (txtValue_city.toUpperCase().indexOf(filter_city) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
margin-top: 20px;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="text" id="name-search" onkeyup="nameSearch()" placeholder="Name.." class="table-search-filters">
<input type="text" id="age-search" onkeyup="ageSearch()" placeholder="Age.." class="table-search-filters">
<input type="text" id="city-search" onkeyup="citySearch()" placeholder="City.." class="table-search-filters">
<table id="custom-table">
<thead>
<th>Name</th>
<th>Age</th>
<th>City</th>
</thead>
<tbody>
<tr>
<td>Bruce</td>
<td>32</td>
<td>Gotham</td>
</tr>
<tr>
<td>Bane</td>
<td>32</td>
<td>Chicago</td>
</tr>
<tr>
<td>Joker</td>
<td>28</td>
<td>Gotham</td>
</tr>
<tr>
<td>Harvey</td>
<td>30</td>
<td>Miami</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>我还尝试将所有输入映射到单个函数，而不是使用三个单独的“onkeyup”函数，但这仍然没有多大帮助。
No need of separate onKeyUp handlers for each input.Just one handler is enough.
不要通过标签“td”获取元素tr[i].getElementsByTagName("td")，而是使用tr[i].cells
并table.rows获取行（来自 gman 的评论）
代替 tr =table.getElementsByTagName("tr");
tr = table.rows;
for (let i = 0; i < tr.length; i++) {
td= tr[i].cells;
td_name =td[0].innerText;
td_age = td[1].innerText;
td_city = td[2].innerText;
if (td_name.toUpperCase().indexOf(filter_name) > -1 && td_age.toUpperCase().indexOf(filter_age) > -1 && td_city.toUpperCase().indexOf(filter_city) > -1) {
tr[i].style.display = "";
}
else
tr[i].style.display = "none";
}
tr = table.rows;
for (let i = 0; i < tr.length; i++) {
td= tr[i].cells;
td_name =td[0].innerText;
td_age = td[1].innerText;
td_city = td[2].innerText;
if (td_name.toUpperCase().indexOf(filter_name) > -1 && td_age.toUpperCase().indexOf(filter_age) > -1 && td_city.toUpperCase().indexOf(filter_city) > -1) {
tr[i].style.display = "";
}
else
tr[i].style.display = "none";
}
var input_name = document.getElementById("name-search");
var input_age = document.getElementById("age-search");
var input_city = document.getElementById("city-search");
var table = document.getElementById("custom-table");
function search() {
let filter_name = input_name.value.toUpperCase();
let filter_age = input_age.value.toUpperCase();
let filter_city = input_city.value.toUpperCase();
let tr = table.rows;
for (let i = 0; i < tr.length; i++) {
td = tr[i].cells;
td_name = td[0].innerText;
td_age = td[1].innerText;
td_city = td[2].innerText;
if (td_name.toUpperCase().indexOf(filter_name) > -1 && td_age.toUpperCase().indexOf(filter_age) > -1 && td_city.toUpperCase().indexOf(filter_city) > -1) {
tr[i].style.display = "";
} else
tr[i].style.display = "none";
}
}table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
margin-top: 20px;
}