title: How to filter a html table using simple javascript?
body: <p>I have a code to filter a table. It will filter only based on first column. How to make it filter second column alone. Also how to filter complete table?</p>
  
  <p>I am not able to figure out the method to do it. I trying to get help to do it without any other external libraries.</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-html lang-html prettyprint-override"><code>&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;script&gt;
  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";
        }
      }       
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/07oqrsu4/" rel="noreferrer">JS Fiddle</a></p>