我有一個(gè)包含三列的 HTML 表 - （姓名、年齡、城市）。我正在嘗試實(shí)現(xiàn)“MS Excel”就像功能一樣，我可以在其中過濾多個(gè)列。盡管過濾器是單獨(dú)工作的，但當(dāng)用戶同時(shí)在多個(gè)輸入字段中輸入文本時(shí)，它們會(huì)發(fā)生故障。例如，僅輸入名稱即可正常工作，但輸入名稱和城市將完全排除名稱過濾器。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"; } } }}而不是擁有三個(gè)單獨(dú)的“onkeyup”；函數(shù)時(shí)，我還嘗試將所有輸入映射到單個(gè)函數(shù)，但這仍然沒有多大幫助。
4 回答
鴻蒙傳說
TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊
不需要為每個(gè)輸入使用單獨(dú)的 onKeyUp 處理程序。只需一個(gè)處理程序就足夠了。
不是通過標(biāo)簽“td”獲取元素，而是通過標(biāo)簽“td”獲取元素。 tr[i].getElementsByTagName("td")，使用tr[i].cells
和table.rows獲取行（來自gman的評(píng)論）
代替 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貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
因此，您需要為每個(gè)過濾器創(chuàng)建一個(gè)過濾函數(shù)。您可以使用 startsWith、includes 或 === 來實(shí)現(xiàn)不同的搜索行為。
接下來，您需要?jiǎng)?chuàng)建一個(gè)“主”文件過濾器將調(diào)用所有其他過濾器。
然后向父元素添加一個(gè)事件偵聽器（在我的片段中，我將其添加到 window 對(duì)象）以防止多個(gè)事件偵聽器。當(dāng)事件發(fā)生時(shí)，檢查其目標(biāo)并在需要時(shí)調(diào)用主過濾器函數(shù)。
一些明顯的特征：
自定義過濾行為
易于測(cè)試的純函數(shù)
可組合的主過濾器函數(shù)
沒有必要的混亂=）（有爭(zhēng)議）
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貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以將三個(gè)函數(shù)合并為一個(gè)，然后僅使用 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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊
如果您想包含標(biāo)頭，請(qǐng)更改為包含 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 關(guān)注
- 259 瀏覽
添加回答
舉報(bào)
0/150
提交
取消