Jump to content
Elka74100

CSS Javascript Filters Table

Recommended Posts

Hi Guys,

I am using the CSS Javascript filter table which is posted on W3 website : https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_filters_table

It works well but searches only in the first column of the table and I would like it searches in both.

If someone could give me the solution I would really appreciate that. ;) 

Thank you very much in advance.

PS: The code

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

 

Edited by Elka74100
forgot add code

Share this post


Link to post
Share on other sites

in the above code,

for (i = 0; i < tr.length; i++) {       // for loop is iterating over the each n every row
    td = tr.getElementsByTagName("td")[0];  // this line is fetching its first column means 0th column to apply the filter in future..  for your need you also need to fetch next column
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {  // this line is actually important for filtering the result.. you just have to do some code magic with this line according to your need
        tr.style.display = "";
      } else {
        tr.style.display = "none";
      }
    }
  }

Edited by satishpoul

Share this post


Link to post
Share on other sites
        <script>

            window.onload = function() {
                input = document.getElementById("myInput");
                input.value = "";
            }


            function myFunction() {
                var input, filter, table, tr, td, i, foundCount;
                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");

                    if (td) {
                        foundCount = 0;
                        for (j = 0; j < td.length; j++) {

                            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                                foundCount++;
                              }
                        }
                        if (foundCount !== 0) {
                            tr[i].style.display = "";

                        } else {
                            tr[i].style.display = "none";

                        }


                    }
                }
            }
        </script>

 

Edited by dsonesuk

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

×