Table Row Filtering for All Columns TD in Javascript

Question

I have here textbox working for filtering columns inside the table column 0. But I want is that all columns will be filtered instead of just column 0.

Here's my jsfiddle:

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

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

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

<table id="myTable" border="1">
  <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>

In addition too, I don't know how to implement this: "Filtering option shouldn't block UI, you can use progress bar."

I included the whole sample code here that I have.

serdar.sanri · Accepted Answer · 2017-08-11 17:08:46Z

3

All you need to do is loop through tds in each row

function myFunction() {
  var input, filter, table, tr, td, i, t;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    var filtered = false;
    var tds = tr[i].getElementsByTagName("td");
    for(t=0; t<tds.length; t++) {
        var td = tds[t];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            filtered = true;
          }
        }     
    }
    if(filtered===true) {
        tr[i].style.display = '';
    }
    else {
        tr[i].style.display = 'none';
    }
  }
}

edited Aug 11, 2017 at 17:08

answered Aug 11, 2017 at 16:48

serdar.sanri

2,2281 gold badge18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

mredwine Over a year ago

jsfiddle.net/6yq32wo2 here's the link. I commented out the working one and put your code but it doesn't work man

serdar.sanri Over a year ago

ok, see updated one. I made a mistake used same variable name.

mredwine Over a year ago

Oh thanks. For this " "Filtering option shouldn't block UI, you can use progress bar." how can I achieve it?

mredwine Over a year ago

When I try to use the search, the headers are gone.

Tom O. · Accepted Answer · 2017-08-11 17:23:21Z

0

Are you looking for some functionality like this? I just updated your function slightly.

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  var rows = table.getElementsByTagName("tr");
  for (i = 0; i < rows.length; i++) {
    var cells = rows[i].getElementsByTagName("td");
    var j;
    var rowContainsFilter = false;
    for (j = 0; j < cells.length; j++) {
      if (cells[j]) {
        if (cells[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          rowContainsFilter = true;
          continue;
        }
      }
    }

    if (! rowContainsFilter) {
      rows[i].style.display = "none";
    } else {
      rows[i].style.display = "";
    }
  }
}

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

<table id="myTable" border="1">
  <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>

answered Aug 11, 2017 at 17:23

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

6 Comments

mredwine Over a year ago

But while searching, how can I achieve this " "Filtering option shouldn't block UI, you can use progress bar."?

Tom O. Over a year ago

I'm not sure exactly what you're asking. Is the page going to be rendering while users are searching? Or are you saying you need to display a progress bar each time the keyup event is fired?

mredwine Over a year ago

Exactly, there will be a loader that fires while keyup is triggered.

mredwine Over a year ago

When I try to use the search, the headers are gone.

Tom O. Over a year ago

If you want to exclude the table headers from being filtered, just put an if statement in the first for-loop that checks if it's the 0 index item in the array, if so, just proceed to the next iteration without performing the filter.

|

Kamal Timalsina · Accepted Answer · 2023-04-10 11:29:38Z

if the are headers are gone. for this you have to loop start from index 1 this will work form header fix

function myFunction() {
  var input, filter, table, tr, td, i, t;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 1; i < tr.length; i++) {
    var filtered = false;
    var tds = tr[i].getElementsByTagName("td");
    for(t=0; t<tds.length; t++) {
        var td = tds[t];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            filtered = true;
          }
        }     
    }
    if(filtered===true) {
        tr[i].style.display = '';
    }
    else {
        tr[i].style.display = 'none';
    }
  }
}

Collectives™ on Stack Overflow

Table Row Filtering for All Columns TD in Javascript

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related