title: Filtering table multiple columns
body: <p>I used w3School code for my page and it works fine but it only filters one column, don’t know how create loops but hopping there is easier solution.</p>
  
  <pre><code>    td = tr[i].getElementsByTagName("td")[0];     
  </code></pre>
  
  <p>changing here 0 to 1 changes the column, could find anything so tried many different thing but not the programmer have no idea if there any other properties that allows multiple columns, spent so much searching, please help</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];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  #myInput {
    background-image: url('/css/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
  }
  
  #myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
  }
  
  #myTable th,
  #myTable td {
    text-align: left;
    padding: 12px;
  }
  
  #myTable tr {
    border-bottom: 1px solid #ddd;
  }
  
  #myTable tr.header,
  #myTable tr:hover {
    background-color: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;My Customers&lt;/h2&gt;
  
  &lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search             for names.." title="Type in a name"&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;Alfreds Futterkiste&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
      &lt;td&gt;Sweden&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Island Trading&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Koniglich Essen&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
      &lt;td&gt;Canada&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
      &lt;td&gt;Italy&lt;/td&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>