title: JavaScript single input search multiple html table columns
body: <p>I am using PHP and MySQL to build an HTML table.  I am trying to use JavaScript to filter/search the table and only display the rows with the results I need.  I want the JavaScript input to search multiple <code>&lt;td&gt;</code>s of the table.  I was able to get this to work, but it is not going to be an elegant solution to put in place with larger tables.  </p>
  
  <p>I am sure there is a better way to choose what is being searched, but have not been able to find anything.  Does anybody know a way for me to make this code more flexible for varying column width tables?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt; tr.length; i++) {
          td = tr[i].getElementsByTagName("td")[0];
          td1 = tr[i].getElementsByTagName("td")[1];
          if (td+td1) {
            if ((td.innerHTML.toUpperCase().indexOf(filter)+td1.innerHTML.toUpperCase().indexOf(filter)) &gt; -2) {
              tr[i].style.display = "";
            } else {
              tr[i].style.display = "none";
            }
          }       
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in anything"&gt;
      
      &lt;table id="myTable"&gt;
        &lt;tr class="header"&gt;
          &lt;th style="width:60%;"&gt;Name&lt;/th&gt;
          &lt;th style="width:40%;"&gt;Country&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;North/South&lt;/td&gt;
          &lt;td&gt;UK&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Paris specialites&lt;/td&gt;
          &lt;td&gt;France&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      </code></pre>
  </div>
  </div>
  </p>