如何过滤/搜索/突出显示 HTML 表格中的列？
[英]How to filter/search/highlight columns in HTML table?
问题描述
How to filter/search/highlight columns in HTML table?
如何过滤/搜索/突出显示 HTML 表格中的列？ 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 个解决方案
解决方案1
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.我在您的代码中添加了一个else语句，并在添加mark标记之前检查搜索词中的空字符串，它按预期工作。
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>解决方案2
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.一个快速而肮脏的解决方案是在 TD 中进行搜索之前从 TD 的 innerHTML 中删除标记。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.