stackoom
  简体   繁体   中英

Table filter/search for two columns

 原文  2022-05-17 08:46:43  1   2    javascript

Question

Í'm trying to make this search/filter function filter by looking at data in col0 or col1. What I'm trying to change the JS, to look at td = tr[i].getElementsByTagName("td")[0]; and 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>

2 answers

solution1
 2 ACCPTED  2022-05-17 09:11:44

You can grab the textContent of both the columns and then display the rows where the textContent contains the filterText .

I've also made the following changes to your code:

 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. 

 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>

solution2
 0  2022-05-17 09:04:39

You need to search in both td elements for each row. In your code you only search in the first column because for each row you consider td = tr[i].getElementsByTagName("td")[0]; which is the 'Name' col. You need to consider also the second td element: td = tr[i].getElementsByTagName("td")[1]; .

In the following snippet I just add another for loop inside myFunction(). It allows to check the 'Name' column (j = 0), like you do now, and then the 'Country' column (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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Filter/Search Table on Two Columns and Hide Rows How to create a filter search to search data from two columns in a table? How to filter/search columns in HTML table? How to filter/search/highlight columns in HTML table? jQuery: Search and filter one table with two search bars simultaneously Altering w3 example table filter to search multiple columns Javascript: How to search more than two columns on table Search and filter rows in table How to search and filter a Google Sheet based on two parameters in two different columns Filter/Search Table HTML
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM