我正在使用表格，我想在所有列中按匹配执行搜索。以下代码仅匹配表的第一列数据。但我希望它应该按所有列数据进行搜索。如果您有任何想法我可以做到这一点，请与我分享。提前致谢！JsFiddle：https ://jsfiddle.net/hbrjy04m/<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>* { box-sizing: border-box;}#myInput { 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;}</style></head><body><h2>My Customers</h2><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." 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><a href="https://teluguhitflopmovieslist.blogspot.com/">Laughing Bacchus Winecellars</a></td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td><a href="https://lyricxona.blogspot.com/">UK</a></td> </tr> <tr> <td>Paris specialites</td> <td><a href="https://castxona.blogspot.com/">France</a></td> </tr> </table>
4 回答
紫衣仙女
TA贡献1839条经验 获得超15个赞
您可以使用for循环遍历atd中的所有 str并搜索组合文本。
function myFunction() {
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++) {
const tableData = tr[i].getElementsByTagName("td");
let allTextContent = '';
for (let ind = 0; ind < tableData.length; ind++) {
allTextContent += tableData[ind].innerText;
}
if (allTextContent) {
if (allTextContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
尽管您可以避免额外的循环并textContent改为搜索整行。一些东西也可以重构。
更新了小提琴。
const searchInput = document.querySelector('#myInput');
const tableRows = document.querySelector('#myTable').querySelectorAll('tr');
searchInput.addEventListener('input', (e) => {
const searchInputValue = e.target.value.toLowerCase();
tableRows.forEach(row => {
const doesRowMatch = row.textContent.toLowerCase().includes(searchInputValue);
if (doesRowMatch) {
row.style.display = 'table-row';
} else {
row.style.display = 'none';
}
})
})
郎朗坤
TA贡献1921条经验 获得超9个赞
const search = document.querySelector("input[name=search]");
const table = document.querySelector("#myTable");
const rows = table.querySelectorAll("tr");
search.addEventListener("input", () => {
rows.forEach(row => {
const matches = row.textContent
.toLowerCase()
.includes(search.value.toLowerCase())
matches ? row.classList.remove("hide") : row.classList.add("hide");
});
});
* {
box-sizing: border-box;
}
.hide {
display: none !important;
}
input[name=search] {
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;
}
<h2>My Customers</h2>
<input type="text" name="search" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<thead>
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
</thead>
<tbody>
<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><a href="https://teluguhitflopmovieslist.blogspot.com/">Laughing Bacchus Winecellars</a></td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td><a href="https://lyricxona.blogspot.com/">UK</a></td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
</tbody>
</table>
守着星空守着你
TA贡献1799条经验 获得超8个赞
function myFunction() {
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 = "";
i++;
} else {
tr[i].style.display = "none";
}
}
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";
}
}
}
}
https://jsfiddle.net/cjb1rx6f/1/
这有效，但其他答案更好......
慕田峪9158850
TA贡献1794条经验 获得超7个赞
即使您增加列数，这也应该有效
基本上，您遍历所有TD内部TR，如果找到一个匹配项，则转到下一行。
function myFunction() {
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++) {
tds = tr[i].getElementsByTagName("td")
var foundInRow = false
for(j=0; j<tds.length; j++){
if(foundInRow)
continue
td = tr[i].getElementsByTagName("td")[j];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
foundInRow = true
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
}
添加回答
举报
0/150
提交
取消