CSS Javascript Filters Table

[Elka74100]

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 August 11, 2017 by Elka74100
forgot add code

[satishpoul]

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 August 11, 2017 by satishpoul

[dsonesuk]

        <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 August 11, 2017 by dsonesuk

[Elka74100]

Thank you so much guys