title: javascript search works for only one(first) column instead of the whole html table
body: <p>I've been trying to use search and filter options but seems like the search option is working for only the first column i.e." ID " . I would like it to work for all the columns specially the names and pincode column. Any help is appreciated.
  Thank you!</p>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;div class="table"&gt;
            &lt;h3 class="page-header"&gt;Agents Table&lt;/h3&gt;
            &lt;input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="type in a name"&gt;
            &lt;table id="grid-basic" class="table table-condensed table-hover table-striped"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th data-column-id="id" data-type="numeric"&gt;ID&lt;/th&gt;
                  &lt;th data-column-id="name"&gt;Agent's Name&lt;/th&gt;
                  &lt;th data-column-id="contact"&gt;Contact&lt;/th&gt;
                  &lt;th data-column-id="location"&gt;Location&lt;/th&gt;
                  &lt;th data-column-id="pin"&gt;PIN&lt;/th&gt;
                  &lt;th data-column-id="action"&gt;Action&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;?php
              $stmt = $con-&gt;prepare("SELECT * FROM agents ORDER BY id ASC");
              $stmt -&gt;execute();
              $results = $stmt-&gt;fetchAll();
              foreach($results as $row){
                ?&gt;
                &lt;tbody&gt;
                  &lt;tr&gt;
                    &lt;td&gt;&lt;?=$row['id'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?=$row['name'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?=$row['contact'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?=$row['location'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?=$row['pin'];?&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;?php echo '&lt;a href="agentlog.php?id='.$row['name'].'"&gt;&lt;button type="button" class="btn btn-primary btn-md" &gt;View&lt;/button&gt;&lt;/a&gt;';?&gt;&lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;?php
                }
                ?&gt;
              &lt;/table&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        function myFunction() {
          var input, filter, table, tr, td, i;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          table = document.getElementById("grid-basic");
          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>