CODEWITHSUNDEEP
javascriptfiltering
Coalsand
Coalsand

Reputation: 47

Filtering a table with text field with JavaScript on all columns

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?

Upvotes: 1

Views: 1880

Answers (1)

aviya.developer
aviya.developer

Reputation: 3613

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>

Upvotes: 3

Related Questions