How to create a filter search to search data from two columns in a table?

Question

Right now the search is searching from only first column. I have taken the code from w3schools Here is the code:

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++) {
    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";
      }
    }
  }
}

Answer 1

Try this

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

Working fiddle

Answer 2

You will need to extend your loop to include multiple columns as well:

//Get the column count
var columnCount = table.getElementsByTagName("tr")[0].childNodes.length;

for (i = 0; i < tr.length; i++) {

    for (j = 0; j < columnCount; j++) {

        td = tr[i].getElementsByTagName("td")[j];

        if (td) {

                var tempText;

                if(td.childNodes[1].getAttribute('id')){

                    tempText = td.childNodes[1].getAttribute('id');

                }                   
                else {

                    tempText = td.innerHTML.toUpperCase();

                }

                try {
                    if (tempText.indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
                catch(err) {}

        }

    }

}