我有一个包含三列的 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"; } } }}而不是拥有三个单独的“onkeyup”；函数时，我还尝试将所有输入映射到单个函数，但这仍然没有多大帮助。
4 回答
鸿蒙传说
TA贡献1865条经验 获得超7个赞
不需要为每个输入使用单独的 onKeyUp 处理程序。只需一个处理程序就足够了。
不是通过标签“td”获取元素，而是通过标签“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";
}
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;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters">
<input type="text" id="age-search" onkeyup="search()" placeholder="Age.." class="table-search-filters">
<input type="text" id="city-search" onkeyup="search()" 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>
</body>
</html>
慕田峪7331174
TA贡献1828条经验 获得超13个赞
因此，您需要为每个过滤器创建一个过滤函数。您可以使用 startsWith、includes 或 === 来实现不同的搜索行为。
接下来，您需要创建一个“主”文件过滤器将调用所有其他过滤器。
然后向父元素添加一个事件侦听器（在我的片段中，我将其添加到 window 对象）以防止多个事件侦听器。当事件发生时，检查其目标并在需要时调用主过滤器函数。
一些明显的特征：
自定义过滤行为
易于测试的纯函数
可组合的主过滤器函数
没有必要的混乱=）（有争议）
const sourceList = Array.from(document.querySelectorAll("tbody tr"));
const nameFilter = (value, item) => !value || item.querySelector("td:nth-child(1)").textContent.toLowerCase().includes(value.toLowerCase());
const ageFilter = (value, item) => !value || item.querySelector("td:nth-child(2)").textContent.startsWith(value);
const cityFilter = (value, item) => !value || item.querySelector("td:nth-child(3)").textContent.toLowerCase().includes(value.toLowerCase());
const mainFilter = ({name, age, city}, item) => {
return nameFilter(name, item) && ageFilter(age, item) && cityFilter(city, item);
}
const currentFilters = {
name: '',
age: '',
city: '',
};
window.addEventListener('input', event => {
if (event.target.matches('.table-search-filters')) {
currentFilters[event.target.name] = event.target.value;
sourceList.forEach(item => {
const isVisible = mainFilter(currentFilters, item);
item.style.display = !isVisible ? 'none' : 'inherit';
})
}
})
const table = document.querySelector('table');
<input name="name" type="text" id="name-search" placeholder="Name.." class="table-search-filters">
<input name="age" type="text" id="age-search" placeholder="Age.." class="table-search-filters">
<input name="city" type="text" id="city-search" 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>
MMMHUHU
TA贡献1834条经验 获得超8个赞
您可以将三个函数合并为一个，然后仅使用 and(&&) 检查条件。希望下面的代码有帮助。
索引.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters">
<input type="text" id="age-search" onkeyup="search()" placeholder="Age.." class="table-search-filters">
<input type="text" id="city-search" onkeyup="search()" 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>
脚本.js
function search() {
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];
td_age = tr[i].getElementsByTagName("td")[1];
td_name = tr[i].getElementsByTagName("td")[0];
if(td_city && td_age && td_name){
txtValue_city = td_city.textContent || td_city.innerText;
txtValue_age = td_age.textContent || td_age.innerText;
txtValue_name = td_name.textContent || td_name.innerText;
if (txtValue_city.toUpperCase().indexOf(filter_city) > -1
&& txtValue_age.toUpperCase().indexOf(filter_age) > -1
&& txtValue_name.toUpperCase().indexOf(filter_name) > -1) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
}
杨魅力
TA贡献1811条经验 获得超5个赞
如果您想包含标头，请更改为包含 class = header 或更改为
<tr class="header">
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
里面
并在 *.js 文件中使用这行代码
tr = table.querySelectorAll("tbody tr:not(.header)");
- 4 回答
- 0 关注
- 75 浏览
添加回答
举报
0/150
提交
取消