首页猿问 HTML 表格多列过滤器

HTML 表格多列过滤器

Html5

萧十郎 2023-12-19 10:09:50

我有一个包含三列的 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>

</head>

<body>

<thead>

</thead>

<tbody>

<tr>

<td>Bruce</td>

<td>Gotham</td>

</tr>

<tr>

<td>Chicago</td>

</tr>

<tr>

<td>Joker</td>

<td>Gotham</td>

</tr>

<tr>

<td>Harvey</td>

<td>Miami</td>

</tr>

</tbody>

</table>

</body>

</html>

反对回复 2023-12-19

慕田峪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');

<thead>

</thead>

<tbody>

<tr>

<td>Bruce</td>

<td>Gotham</td>

</tr>

<tr>

<td>Chicago</td>

</tr>

<tr>

<td>Joker</td>

<td>Gotham</td>

</tr>

<tr>

<td>Harvey</td>

<td>Miami</td>

</tr>

</tbody>

</table>

反对回复 2023-12-19

MMMHUHU

TA贡献1834条经验获得超8个赞

您可以将三个函数合并为一个，然后仅使用 and(&&) 检查条件。希望下面的代码有帮助。

索引.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

</thead>

<tbody>

<tr>

<td>Bruce</td>

<td>Gotham</td>

</tr>

<tr>

<td>Chicago</td>

</tr>

<tr>

<td>Joker</td>

<td>Gotham</td>

</tr>

<tr>

<td>Harvey</td>

<td>Miami</td>

</tr>

</tbody>

</table>

</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";

}

反对回复 2023-12-19

杨魅力

TA贡献1811条经验获得超6个赞

如果您想包含标头，请更改为包含 class = header 或更改为

</tr>

里面

并在 *.js 文件中使用这行代码

tr = table.querySelectorAll("tbody tr:not(.header)");

反对回复 2023-12-19

4 回答
0 关注
152 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

HTML 表格多列过滤器

HTML 表格多列过滤器

4 回答

添加回答