Filtering a table with text field with JavaScript on all columns

Question

I've got a table of records and I've got a text field above it which dynamically filters the records on a specific table column. I implemented it following this handy How-To https://www.w3schools.com/howto/howto_js_filter_table.asp

Now, this works as advertised, but I'm looking to modify it so that the filter looks at all columns, not just one of them. In the example from the How-To, I'd like to be able to type a name or a country and for it to return all matches. I tried to do this in the JavaScript:

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++) {
  for (j = 0; j < tr.width; j++) {
    td = tr[i].getElementsByTagName("td")[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
          }}}}}

The j variable is where I had hoped to additionally loop through the columns for each i, but doing this seems to break the filtering functionality, ie. typing anything has no effect on the records displayed - all records show at all times. Can someone tell me what I'm doing wrong?

Looks like you need to break your inner loop if you match the condition where you set the tr to display: none. Otherwise, subsequent cells that don't match your filter will reset the display value. — benvc
– benvc, Commented Oct 5, 2018 at 19:54
That code is hard-ish to read. Using better variable names and not compressing the end }s will make it easier to understand what's going on (for you and anyone else). For example, instead of i and j, you could use trIndex and tdIndex. You could also load the tds into a variable before you start iterating over them: var allTds = tr[i].getElementsByTagName("td"); — Jon E
– Jon E, Commented Oct 5, 2018 at 20:10

Community · Accepted Answer · 2020-06-20 09:12:55Z

You have a couple of errors there:

1. invalid for loop:

for (j = 0; j < tr.width; j++)

There's no such thing as tr.width. Or rather it's a jQuery function, so you're getting a text of it when you type tr.width.

Thus the script breaks, since the for loop clause if invalid.

If you actually called like this tr.width() you would get the pixel width of the element so it wouldn't help you either.

What you need is the <td> count in it. Here's how you get it:

let rowTds = tr[i].getElementsByTagName("td")
for (j = 0; j < rowTds.length; j++){...}

now you can iterate through the all the <td>s in the row.

2. Hide row logic needs revision to multiple column check:

Now you also need to change the logic of the hiding because it will keep hiding a row if the the last <td> didn't match the filter string.

td = tr[i].getElementsByTagName("td")[j];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
        break; // this will break the row looping on j after making the row visible.
        } else {
            tr[i].style.display = "none";
          }
        }
      }
    }
  }

Conclusion: Full working code adjusted from the W3schools tutorial:

Link: https://www.w3schools.com/code/tryit.asp?filename=FVXZWZMELE1Q

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<h2>My Customers</h2>

<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>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    let rowTds = tr[i].getElementsByTagName("td")
    for (j = 0; j < rowTds.length; j++){
      td = tr[i].getElementsByTagName("td")[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } else {
          tr[i].style.display = "none";
        }
      }
    }       
  }
}
</script>

</body>
</html>

Collectives™ on Stack Overflow

Filtering a table with text field with JavaScript on all columns

1 Answer 1

1. invalid for loop:

2. Hide row logic needs revision to multiple column check:

Conclusion: Full working code adjusted from the W3schools tutorial:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. invalid for loop:

2. Hide row logic needs revision to multiple column check:

Conclusion: Full working code adjusted from the W3schools tutorial:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related