Sign in to follow this  

Assistance with Table Search

Recommended Posts

s0nic69    6

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

Share this post


Link to post
Share on other sites
Seahorsepip    527

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.

  • Like 1

Share this post


Link to post
Share on other sites
s0nic69    6
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.