How to filter/search/highlight columns in HTML table?
Question
How to filter/search/highlight columns in HTML table? I have a problem when highlighting the matches that my search engine finds, the problem is that when deleting some characters they remain marked, could someone help me and explain why that happens, I have an example in which it is done by column and it works fine for me the problem now is that I want to perform the search by row and highlight the matches.
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]; alltags = tr[i].getElementsByTagName("td"); isFound = false; tr[i].style.display = ""; for(j=0; j< alltags.length; j++) { td = alltags[j]; if (td) { txtValue = td.textContent || td.innerText; index = txtValue.toUpperCase().indexOf(filter); if (index > -1) { td.innerHTML = txtValue.substring(-1, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length); tr[j].style.display = ""; j = alltags.length; isFound = true; } } } if(!isFound && tr[i].className !== "header") { // tr[i].style.display = "none"; } } }
<body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th> First Name </th> <th> Last Name </th> <th> Age </th> <th> Language </th> </tr> <tr> <td>John</td> <td>Kole</td> <td>18</td> <td>English</td> </tr> <tr> <td>Pearl</td> <td>Shine</td> <td>50</td> <td>Hindi</td> </tr> <tr> <td>Jacob</td> <td>Pool</td> <td>22</td> <td>Arabic</td> </tr> <tr> <td>David</td> <td>Struff</td> <td>30</td> <td>German</td> </tr> </table> </body>
2 answers
solution1
0 2022-07-19 19:10:10
You have a problem when the value in the search box is empty string, you don't remove the final highlighted letter of the previous search. I added an else statement to your code as well as a check for empty string in the search term before adding a mark tag and it works as intended.
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]; alltags = tr[i].getElementsByTagName("td"); isFound = false; tr[i].style.display = ""; for(j=0; j< alltags.length; j++) { td = alltags[j]; if (td) { txtValue = td.textContent || td.innerText; index = txtValue.toUpperCase().indexOf(filter); if (index > -1 && filter !== "") { td.innerHTML = txtValue.substring(-1, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length); tr[j].style.display = ""; j = alltags.length; isFound = true; } else { td.innerHTML = td.textContent; } } } if(!isFound && tr[i].className !== "header") { // tr[i].style.display = "none"; } } }
<body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th> First Name </th> <th> Last Name </th> <th> Age </th> <th> Language </th> </tr> <tr> <td>John</td> <td>Kole</td> <td>18</td> <td>English</td> </tr> <tr> <td>Pearl</td> <td>Shine</td> <td>50</td> <td>Hindi</td> </tr> <tr> <td>Jacob</td> <td>Pool</td> <td>22</td> <td>Arabic</td> </tr> <tr> <td>David</td> <td>Struff</td> <td>30</td> <td>German</td> </tr> </table> </body>solution2
0 2022-07-19 19:12:15
A quick and dirty solution is to remove the mark from the TD's innerHTML before doing a search in that TD. That way it will always show the current results.
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]; alltags = tr[i].getElementsByTagName("td"); isFound = false; tr[i].style.display = ""; for(j=0; j< alltags.length; j++) { td = alltags[j]; if (td) { td.innerHTML = td.innerHTML.replaceAll("<mark>",""); td.innerHTML = td.innerHTML.replaceAll("</mark>",""); txtValue = td.textContent || td.innerText; index = txtValue.toUpperCase().indexOf(filter); if (index > -1) { td.innerHTML = txtValue.substring(-1, index) + "<mark>" + txtValue.substring(index, index + filter.length) + "</mark>" + txtValue.substring(index + filter.length); tr[j].style.display = ""; j = alltags.length; isFound = true; } } } if(!isFound && tr[i].className !== "header") { // tr[i].style.display = "none"; } } }
<body> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th> First Name </th> <th> Last Name </th> <th> Age </th> <th> Language </th> </tr> <tr> <td>John</td> <td>Kole</td> <td>18</td> <td>English</td> </tr> <tr> <td>Pearl</td> <td>Shine</td> <td>50</td> <td>Hindi</td> </tr> <tr> <td>Jacob</td> <td>Pool</td> <td>22</td> <td>Arabic</td> </tr> <tr> <td>David</td> <td>Struff</td> <td>30</td> <td>German</td> </tr> </table> </body>
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
How to filter/search columns in HTML table?
How can a html table highlight columns by changing the border on hover?
Filter/Search Table HTML
How to create a filter search to search data from two columns in a table?
How to highlight words in a table with a filter?
how to search in html table with any columns?
Table filter/search for two columns
how to create search filter and text highlight in angularjs
Search through HTML table columns
How to highlight result of a search in Flask/HTML?
Related Tags