title: Altering w3 example table filter to search multiple columns
body: <p>I am working in PHP with a large table of alternating amounts of columns per row. The rows and columns are generated and populated by a series of "foreach" loops calling things from a MYSQL database.</p>
  
  <p>I'm pretty comfortable with the PHP/HTML and MYSQL end of things.</p>
  
  <p>I'm attempting to use Javascript to create some "quick filters" for this table.</p>
  
  <p>I started from an example on w3 which is as follows</p>
  
  <pre><code>    &lt;script&gt; 
       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 &lt; tr.length; i++) {
  td = tr[i].getElementsByTagName("td")[0];
  if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
      tr[i].style.display = "";
    } else {
      tr[i].style.display = "none";
    }
   } 
  }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This works alongside an input tag where you can search with user input text. Mine doesn't look example like the example anymore, but my real question is</p>
  
  <p>How can I make this search through ALL the columns (effectively the entire text of the table) as its written, this section of code controls which column is searched.</p>
  
  <pre><code> td = tr[i].getElementsByTagName("td")[0];
  </code></pre>
  
  <p>the [0] at the end means it searches the "first" column only. changing the 0 to another number will change to searching the corresponding column of the whole table.</p>
  
  <p>I feel like there must be a simple way to expand this to multiple columns. I am completely new to JS so I'm really fumbling around here.</p>
  
  <p>I've tried all the basic things I could think of like just changing the number around stuff like:</p>
  
  <pre><code>[0,1,2,3,4]// [0-4]// [0][1][2] 
  </code></pre>
  
  <p>None of those simple things seem to be what I'm looking for. It either picks the last listed number for the column to search, or just breaks it altogether!</p>