表过滤器/搜索两列

Question

Í'm trying to make this search/filter function filter by looking at data in col0 or col1. Í正在尝试通过查看 col0 或 col1 中的数据来过滤此搜索/过滤功能。 What I'm trying to change the JS, to look at td = tr[i].getElementsByTagName("td")[0];我正在尝试更改 JS，查看td = tr[i].getElementsByTagName("td")[0]; and td = tr[i].getElementsByTagName("td")[1];和td = tr[i].getElementsByTagName("td")[1]; , but can't make it work. ，但不能让它工作。

Code working for searching on Name (not country):用于搜索名称（不是国家/地区）的代码：

 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 = ""; } else { tr[i].style.display = "none"; } } } }

 * { 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; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table> </body> </html>

Answer 1

You can grab the textContent of both the columns and then display the rows where the textContent contains the filterText .您可以获取两列的textContent ，然后显示textContent包含filterText的行。

I've also made the following changes to your code:我还对您的代码进行了以下更改：

Wrapped table heading in <thead> and table body in <tbody> . <thead>中的表格标题和<tbody>中的表格正文。
Used Element.children to loop over all the rows in the table.使用Element.children循环遍历表中的所有行。
Used Element.firstElementChild & Element.lastElementChild to grab the first and second column for every row.使用Element.firstElementChild和Element.lastElementChild来抓取每一行的第一列和第二列。
Used String.prototype.includes to check if the search text is present in the columns.使用String.prototype.includes检查搜索文本是否存在于列中。
Passed event to the function.将event传递给函数。

 let tbody = document.getElementById("table-body"); function myFunction(e) { const filterText = e.target.value.toUpperCase(); Array.from(tbody.children).forEach((row) => { const name = row.firstElementChild.textContent.toUpperCase(); const country = row.lastElementChild.textContent.toUpperCase(); if (name.includes(filterText) || country.includes(filterText)) { row.style.display = "table-row"; } else { row.style.display = "none"; } }) }

 * { 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; }

 <h2>My Customers</h2> <input type="text" id="myInput" onkeyup="myFunction(event)" 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 id="table-body"> <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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> <tbody> </table>

If there are more than two columns and you want to apply filter based on all columns, then you can use Array.prototype.some and check if any of the columns contain the search text.如果有两个以上的列并且您想基于所有列应用过滤器，那么您可以使用Array.prototype.some并检查是否有任何列包含搜索文本。

 let tbody = document.getElementById("table-body"); function myFunction(e) { const filterText = e.target.value.toUpperCase(); Array.from(tbody.children).forEach((row) => { const showRow = Array.from(row.children).some(c => c.textContent.toUpperCase().includes(filterText)) if (showRow) { row.style.display = "table-row"; } else { row.style.display = "none"; } }) }

 * { 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; }

 <h2>My Customers</h2> <input type="text" id="myInput" onkeyup="myFunction(event)" 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 id="table-body"> <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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> <tbody> </table>

Answer 2

You need to search in both td elements for each row.您需要在每行的两个 td 元素中搜索。 In your code you only search in the first column because for each row you consider td = tr[i].getElementsByTagName("td")[0];在您的代码中，您仅在第一列中搜索，因为对于您考虑的每一行td = tr[i].getElementsByTagName("td")[0]; which is the 'Name' col.这是'名称'col。 You need to consider also the second td element: td = tr[i].getElementsByTagName("td")[1];您还需要考虑第二个 td 元素： td = tr[i].getElementsByTagName("td")[1]; . .

In the following snippet I just add another for loop inside myFunction().在下面的代码片段中，我只是在 myFunction() 中添加了另一个 for 循环。 It allows to check the 'Name' column (j = 0), like you do now, and then the 'Country' column (j = 1).它允许检查“名称”列 (j = 0)，就像您现在所做的那样，然后检查“国家”列 (j = 1)。

 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++) { //for each row check both columns for (j = 0; j < 2; j++){ td = tr[i].getElementsByTagName("td")[j]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } }

 * { 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; }

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </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>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table> </body> </html>

表过滤器/搜索两列

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-05-17 09:11:44

解决方案2
0 2022-05-17 09:04:39

表过滤器/搜索两列

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-05-17 09:11:44

解决方案2 0 2022-05-17 09:04:39

解决方案1
2 已采纳 2022-05-17 09:11:44

解决方案2
0 2022-05-17 09:04:39