title: Filter table with dropdown referring to a column containing certain string
body: <p>So I have this set of table I pulled from MySQL Database with the javascript id 'elogbooktable':</p>
  <pre><code>LOT_LOCATION, Zone Attribute, LOTID, Design_ID, Board_ID1, QA_WORK_REQUEST_NO, QA_CONTACT_NAME, QA_PROCESS_NAME, CURRENT_QTY, Date, Temperature, Humidity, Voltage, Current
  'SGHAST.0034', '1', 'CVSBCL2.11', 'J54K', 'EC100TSI0-017', '', NULL, 'HAST 110C', '40', '2022-06-13 07:00:00', '28.81', '87.9', 'V1=0.01V, V2=V, V3=V', 'I1=0.0A, I2=A, I3=A'
  'SGHAST.0034', '1', 'CVSBCL2.11', 'J54K', 'EC100TSI0-017', '', NULL, 'HAST 110C', '40', '2022-06-13 19:00:00', '26.36', '92.51', 'V1=0.01V, V2=V, V3=V', 'I1=0.0A, I2=A, I3=A'
  'SGHAST.0007', '1', 'CVWHBL2.11', 'NM112', 'MP149WSI3-002', '', NULL, 'HAST 110C', '40', '2022-06-13 07:00:00', '54.97', '26.51', 'V1=0.0V, V2=0.0V, V3=0.0V', 'I1=0.0A, I2=0.0A, I3=0.0A'
  </code></pre>
  <p>HTML for table:</p>
  <pre><code>&lt;table id='elogbooktable' class='table table-hover table-striped table-bordered table-responsive table-condensed' style=&quot;width: 100%;&quot; role=&quot;grid&quot; &gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th&gt;Chamber&lt;/th&gt;
                &lt;th&gt;Zone&lt;/th&gt;
                &lt;th&gt;Lot ID&lt;/th&gt;
                &lt;th&gt;Design ID&lt;/th&gt;
                &lt;th&gt;Board ID&lt;/th&gt;
                &lt;th&gt;QAWR&lt;/th&gt;
                &lt;th&gt;QA Contact&lt;/th&gt;
                &lt;th&gt;QA Process Name&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Temperature&lt;/th&gt;
                &lt;th&gt;Humidity&lt;/th&gt;
                &lt;th&gt;Voltage&lt;/th&gt; 
                &lt;th&gt;Current&lt;/th&gt;          
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tfoot style='display:table-header-group;'&gt;
            &lt;tr&gt;
                &lt;th&gt;Chamber&lt;/th&gt;
                &lt;th&gt;Zone&lt;/th&gt;
                &lt;th&gt;Lot ID&lt;/th&gt;
                &lt;th&gt;Design ID&lt;/th&gt;
                &lt;th&gt;Board ID&lt;/th&gt;
                &lt;th&gt;QAWR&lt;/th&gt;
                &lt;th&gt;QA Contact&lt;/th&gt;
                &lt;th&gt;QA Process Name&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
                &lt;th&gt;Date&lt;/th&gt;
                &lt;th&gt;Temperature&lt;/th&gt;
                &lt;th&gt;Humidity&lt;/th&gt;
                &lt;th&gt;Voltage&lt;/th&gt; 
                &lt;th&gt;Current&lt;/th&gt;                                  
            &lt;/tr&gt;
        &lt;/tfoot&gt;
      &lt;/table&gt;
  </code></pre>
  <p>And i also have 3 dropdown lists in the form of HTML. This is my HTML code:</p>
  <pre><code>     &lt;div class=&quot;well well-sm-option text-center&quot;&gt;
       &lt;form class=&quot;chamber-type&quot;&gt;
       &lt;label for=&quot;chamber-type&quot;&gt;Chamber Type:&lt;/label&gt;
        &lt;select id=&quot;filterbyChamber&quot; onchange=&quot;myFunction()&quot; class='form-control'&gt;
         &lt;option value=&quot;&quot;&gt;HAST&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;BAKE&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;TC&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;THS&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;THB&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;TS&lt;/option&gt;
        &lt;/select&gt;
       &lt;/form&gt; 
       &lt;form action=&quot;/action_page.php&quot;&gt;
        &lt;label for=&quot;Date&quot;&gt;Date:&lt;/label&gt;
        &lt;input type=&quot;date&quot; id=&quot;date&quot; name=&quot;date&quot; id=&quot;filterbyDate&quot;&gt;
       &lt;/form&gt;
       &lt;form class=&quot;shift&quot;&gt;
        &lt;label for=&quot;shift&quot;&gt;Shift:&lt;/label&gt;         
        &lt;select id=&quot;filterbyShift&quot;&gt;
         &lt;option value=&quot;&quot;&gt;1&lt;/option&gt;
         &lt;option value=&quot;&quot;&gt;2&lt;/option&gt;
        &lt;/select&gt;
       &lt;/form&gt; 
       &lt;/div&gt;
  </code></pre>
  <p>This is my JavaScript code for the first dropdown filter by chamber (since I haven't figured out how to do the second and third dropdown lists):</p>
  <pre><code>  &lt;script&gt;
  function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById(&quot;filterbyChamber&quot;);
  filter = input.value.toUpperCase();
  table = document.getElementById(&quot;elogbooktable&quot;);
  tr = table.getElementsByTagName(&quot;tr&quot;);
  for (i = 0; i &lt; tr.length; i++) {
  td = tr[i].getElementsByTagName(&quot;td&quot;)[0];
  if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
      tr[i].style.display = &quot;&quot;;
    } else {
      tr[i].style.display = &quot;none&quot;;
    }
  }       
  }
  }
  &lt;/script&gt; 
  </code></pre>
  <p>The problem for the first dropdown list is that I cannot filter the table containing strings like 'Hast', 'Bake' etc. since they are included in the data like 'SGHAST.0034'.</p>
  <p>The problem for the second dropdown list is I do not know how to filter according to dates.</p>
  <p>The issue with the third dropdown list is that the Shift 1 data filtering refers to the time of 07:00:00 while Shift 2 refers to 19:00:00, which I do not know how to filter.</p>
  <p>Any help is appreciated thank you!</p>
  <p>FYI, I am new to JavaScript and this is my first task in JavaScript.</p>
  <p>EDIT:
  Realised I do not have element 'td' because all the data rows are pulled from mySQL. I do not know how to continue with this.</p>