• 0

Assistance with Table Search

Asked by s0nic69,

 Share

Question

Mentor

s0nic69

Posted
Posted

Hey guys,

 

I needed a quick searchable table and i was able to find one at w3schools, GREAT! but.... it only searches the first column. Can someone please help me figure out how to modify the script so that it searches both columns? Greatly appreciate any guidance or assistance.


 

Here is the code: 

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
</table>

<script>
function myFunction() {
  
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
    
  
  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

</body>
</html>

Here is the link to the page link

Link to comment
https://www.neowin.net/forum/topic/1338926-assistance-with-table-search/
Share on other sites

2 answers to this question

Recommended Posts

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

The details you need to change is the td variable: 

td = tr[i].getElementsByTagName("td")[0];

Instead get all td elements instead of only the first ( [0] ): 

td = tr[i].getElementsByTagName("td");

 

Then you see that it checks if the element isn't null: 

if(td)
  //Do stuff with td
}

Since we have multiple elements now as value for td instead of a single element let's replace that with a loop: 

for(var j = 0; j < td.length; j++) {
  if(td[j]) {
  	//Do stuff with td[j]
  }
}

 

Putting everything together: 

function tableSearch() {
  
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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]) {
        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";
    }
  }
}

 

I hope that clears up the confusion, below tips from the original article showed how you could change the column you want to search in, it was just a matter of changing that with some logic into all rows.

  

Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

Tip: Change tr[i].getElementsByTagName('td')[0] to [1] if you want to search for "Country" (index 1) instead of "Name" (index 0).

 

Above code could be extended to highlight the columns where the matches were found.

  • 0
Mentor

s0nic69

Posted
  • Author
Posted
On 8/10/2017 at 8:05 AM, Seahorsepip said:

The details you need to change is the td variable: 


td = tr[i].getElementsByTagName("td")[0];

Instead get all td elements instead of only the first ( [0] ): 


td = tr[i].getElementsByTagName("td");

 

Then you see that it checks if the element isn't null: 


if(td)
  //Do stuff with td
}

Since we have multiple elements now as value for td instead of a single element let's replace that with a loop: 


for(var j = 0; j < td.length; j++) {
  if(td[j]) {
  	//Do stuff with td[j]
  }
}

 

Putting everything together: 


function tableSearch() {
  
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  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]) {
        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";
    }
  }
}

 

I hope that clears up the confusion, below tips from the original article showed how you could change the column you want to search in, it was just a matter of changing that with some logic into all rows.

  


Tip: Remove toUpperCase() if you want to perform a case-sensitive search.

Tip: Change tr[i].getElementsByTagName('td')[0] to [1] if you want to search for "Country" (index 1) instead of "Name" (index 0).

 

Above code could be extended to highlight the columns where the matches were found.

Thank you for taking the time to help me. I will give it a try tonight, and a big thank you for explaining the steps, i definitely like to learn these things so that in the future i have a better understanding on how to edit the code, and not seeking help all the time.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.