CODEWITHSUNDEEP
javascript
Mars
Mars

Reputation: 23

Search function in PHP

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>

Upvotes: 2

Views: 238

Answers (3)

Rahul Joshi
Rahul Joshi

Reputation: 1

table = document.getElementById("T_SJSM");

add "T_SJSM" Id to the tbody

or start first loop (tr loop) from 1.

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

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

Upvotes: 1

Vinod Patidar
Vinod Patidar

Reputation: 421

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

Upvotes: 0

Related Questions