HTML表上的多个搜索过滤器

Question

I was wondering if you would be able to help.

I have a HTML table and a text field. Javascript on page load takes the value in the text field and filters the table.

I would to like to add a second text field and use that to further filter the table based on the value in the text field.

I added a new text field and assigned it a value. I added the same script (I think this is where my problem is) and ameneded to look at the new field. Now it look's as though it is only using the second script.

How can I get the both to work and filter the table? Any ideas?

HTML

 <input type="hidden" id="myInput" value="3"/>
<input type="hidden" id="myInput1" value="Time"/>

JAVASCRIPT

$(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

    $(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

Answer 1

$(document).ready(function() {
            console.log("ready");
      var input, filter, table, tr, td, i, searchFilter;
      let input1 =  document.getElementById("myInput1");
      let filter1;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      filter1=input1.value.toUpperCase();
      table = document.getElementById("job_table");
      tr = table.getElementsByTagName("tr");
     for (i = 0; i < tr.length; i++) {
       td = tr[i].getElementsByTagName("td")[3];
       if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1 || 
         txtValue.toUpperCase().indexOf(filter1) > -1) {
              tr[i].style.display = "";
            } else {
           tr[i].style.display = "none";
                   }
              }      
          }
      });