如何使用 JavaScript 搜索包含所有列的表格
我正在使用表格，我想在所有列中按匹配执行搜索。以下代码仅匹配表的第一列数据。但我希望它应该按所有列数据进行搜索。如果您有任何想法我可以做到这一点，请与我分享。提前致谢！
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回答
-
紫衣仙女
您可以使用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'; } })}) -
郎朗坤
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> -
守着星空守着你
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
即使您增加列数，这也应该有效基本上，您遍历所有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"; } } } }}
随时随地看视频慕课网APP
相关分类
JavaScript