CODEWITHSUNDEEP
javascriptcsshtml-table
codingGeneral
codingGeneral

Reputation: 61

Search through multiple columns of a table

I currently have a table that filters and searches through one column of each table, however I'm not sure how to edit my function so that the search is applied to all columns of a table. This is my function and one of my tables: 

  function myFunction(){
  var td, i;
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("myTable");
  var 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";
      }
    }
  }
}

<table className="table table-bordered" id="table2a">
          <tbody>
          <tr><th> Consumer System: </th>
          <td>System1 </td>
          <td>System2 </td>
          </tr>

          <tr>
          <th>Consumer Dev App Name: </th>
          <td> To be on-boarded </td>
          <td> To be on-boarded </td>
          </tr>

          <tr>
          <th> Contact Email Distribution </th>
          <td>TBD </td>
          <td> TBD </td>
          </tr>
          </tbody>
          </table>

Upvotes: 2

Views: 1859

Answers (1)

mjw
mjw

Reputation: 1206

For each row in the table, you will need an inner loop to iterate over each td in the current tr:

function myFunction(){
  var td, i, tdArr, j;
  var input = document.getElementById("myInput");
  var filter = input.value.toUpperCase();
  var table = document.getElementById("myTable");
  var tr = table.getElementsByTagName("tr");

  // Loop through all table rows
  for (i = 0; i < tr.length; i++) {
    tdArr = tr[i].getElementsByTagName("td");
    // Loop through all table columns in the current row, and hide those who don't match the search query
    for (j = 0; j < tdArr.length; j++) {
      td = tdArr[j];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }        
  }
}

Upvotes: 1

Related Questions