title: How do I iterate through each TD and TR in a table using Javascript or Jquery?
body: <p>I wanna provide a Table including a Filter input, the User should input any digits and underneath in the table it should display the row with closest finding. </p>
  
  <p>Lets say I wanna search by 11847, it doesn't show anything, but it should show the row. </p>
  
  <p>Below is a working snippet and my Html and JS which i have so far. But it will loop only through the first column. I know this is according to this piece of code: </p>
  
  <pre><code>td = tr[i].getElementsByTagName("td")[0];
  </code></pre>
  
  <p>But haven't figured it out how to get this done.</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 reservationListFunction() {
    // Declare variables
    var input, filter, table, tr, td, i;
    input = document.getElementById("reservationListInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("reservationTable");
    tr = table.getElementsByTagName("tr");
  
    // Loop through all table rows, and hide those who don't match the search query
    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>#reservationListInput {
    background-image: url('./assets/bootstrap/fonts/searchicon.png');
    /* Add a search icon to input */
    background-position: 10px 12px;
    /* Position the search icon */
    background-repeat: no-repeat;
    /* Do not repeat the icon image */
    width: 100%;
    /* Full-width */
    font-size: 16px;
    /* Increase font-size */
    padding: 12px 20px 12px 40px;
    /* Add some padding */
    border: 1px solid #ddd;
    /* Add a grey border */
    margin-bottom: 12px;
    /* Add some space below the input */
  }
  
  #reservationTable {
    border-collapse: collapse;
    /* Collapse borders */
    width: 100%;
    /* Full-width */
    border: 1px solid #ddd;
    /* Add a grey border */
    font-size: 18px;
    /* Increase font-size */
  }
  
  #reservationTable th,
  #reservationTable td {
    text-align: left;
    /* Left-align text */
    padding: 12px;
    /* Add padding */
  }
  
  #reservationTable tr {
    /* Add a bottom border to all table rows */
    border-bottom: 1px solid #ddd;
  }
  
  #reservationTable tr.header,
  #reservationTable tr:hover {
    /* Add a grey background color to the table header and on hover */
    background-color: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation.."&gt;
  
  &lt;table id="reservationTable"&gt;
    &lt;tr class="header"&gt;
      &lt;th style="width:40%;"&gt;Name&lt;/th&gt;
      &lt;th style="width:20%;"&gt;Cabin&lt;/th&gt;
      &lt;th style="width:20%;"&gt;Table&lt;/th&gt;
      &lt;th style="width:20%;"&gt;Status&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
      &lt;td&gt;49222&lt;/td&gt;
      &lt;td&gt;201&lt;/td&gt;
      &lt;td&gt;Expected&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
      &lt;td&gt;12846&lt;/td&gt;
      &lt;td&gt;300&lt;/td&gt;
      &lt;td&gt;Inhouse&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Island Trading&lt;/td&gt;
      &lt;td&gt;11847&lt;/td&gt;
      &lt;td&gt;234&lt;/td&gt;
      &lt;td&gt;Cancelled&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Koniglich Essen&lt;/td&gt;
      &lt;td&gt;9876&lt;/td&gt;
      &lt;td&gt;253&lt;/td&gt;
      &lt;td&gt;Partial&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>