I'm trying to insert a search function into my website, the one I found can find data from multiple columns (which is great) but the problem is that after the search results get displayed, The text header isn't showing (which isn't good). Does anyone know how to show the search results including the text header? I'm still new to coding, sorry.
<script>
function tableSearch() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("T_SJSM");
tr = table.getElementsByTagName("tr");
// Loop through all table rows AND COLUMNS, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
var match = false;
//Loop trough all columns
for(var j = 0; j < td.length; j++) {
if(td[j]) {
txtValue = td.textContent || td.innerText;
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
match = true;
}
}
}
//Match found in one or multiple columns
if (match) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
</script>
You need to skip the first row (which is the header row)
So start your loop from 1
for (i = 1; i < tr.length; i++) {
Your table structure should be like this
<table>
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
If your table is looking like this then you can change only one line like this:
tr = document.querySelector('tbody').getElementsByTagName("tr");
table = document.getElementById("T_SJSM");
add "T_SJSM" Id to the tbody
or start first loop (tr loop) from 1.