Search function in PHP

user_17982065 0
Viewed 55

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>
javascript
3 Answers

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++) {
user_42483280

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");
user_149584680

table = document.getElementById("T_SJSM");

add "T_SJSM" Id to the tbody

or start first loop (tr loop) from 1.

user_191509200
Related