title: Table filter/search for two columns
body: <p>Í'm trying to make this search/filter function filter by looking at data in col0 or col1.
  What I'm trying to change the JS, to look at <code>td = tr[i].getElementsByTagName(&quot;td&quot;)[0];</code> and <code>td = tr[i].getElementsByTagName(&quot;td&quot;)[1];</code>, but can't make it work.</p>
  <p><strong>Code working for searching on Name (not country):</strong></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, txtValue;
    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) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.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;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &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;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>