Визуальный фильтр HTML таблицы с помощью JS, Код внутри, нужна помощь в оптимизации Опции

[mzk]

Привет
В общем, есть таблица с множеством колонок строк. Строки нужно фильтровать по статусу для визуализации.
Я нашел следующее решение, которое отлично работает, но... эти фильтры не зависимы друг от друга.
То есть, если я выберу фильтр FilterLogistics() он фильтрует по 8-й колонке, а после него выберу FilterStatus(), то все отфильтрованное с помощью FilterLogistics() сбросится и применится только FilterStatus()

Не могу понять, как их зацепить вместе?

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

CODE Format

  <script>

  function FilterLogistics() {
  var select, filter, table, tr, td, i;
  select = document.getElementById("filter_input");
  filter = select.value.toUpperCase();
  table = document.getElementById("orders");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[7];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

  </script>
  <script>

  function FilterStatus() {
  var select, filter, table, tr, td, i;
  select = document.getElementById("filter_input_status");
  filter = select.value.toUpperCase();
  table = document.getElementById("orders");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[6];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

  </script>

Сам хедер в таблице:

» Нажмите, чтобы показать спойлер - нажмите опять, чтобы скрыть... «

CODE Format

echo "<table id=\"orders\" style='width:800px' align='left' class=\"blueTable\">";
echo "<thead>";
  echo "<th>#</th>";
  echo "<th>Store</th>";
  echo "<th>Order</th>";
  echo "<th>Logistic LDAP</th>";
  echo "<th>Logistic status</th>";
  echo "<th>CC LDAP</th>";
  echo "<th>
      <select style='background-color: rgba(100, 100, 100, 0); color: #ffffff; font-size: 14px;' name='filter_status' id='filter_input_status' onchange='FilterStatus()' style='width:18px;'>
            <option style='color: #000000;' value=''>Status</option>
            <option style='color: #000000;' value=''>Всі</option>
            <option style='color: #000000;' value='В процесі'>В процесі</option>
            <option style='color: #000000;' value='Підготовлений'>Підготовлений</option>
    </select></th>";
  echo "<th>
      <select style='background-color: rgba(100, 100, 100, 0); color: #ffffff; font-size: 14px;' name='filter_logistics' id='filter_input' onchange='FilterLogistics()' style='width:18px;'>
            <option style='color: #000000;' value=''>Pyxis status</option>
            <option style='color: #000000;' value=''>Всі</option>
            <option style='color: #000000;' value='Сплачений'>Сплачений</option>
            <option style='color: #000000;' value='Підготовлений'>Підготовлений</option>
            <option style='color: #000000;' value='Не найдійшло на касс'>Не найдійшло на касс</option>
            <option style='color: #000000;' value='Анульований'>Анульований</option>
    </select>
  </th>";

echo "</thead>";

[phpkiev]

Так работать не будет. Надо написать всего одну функцию и в ней проверять все условия одновременно. В противном случае задача становится слишком сложной, т.к. придётся для каждой строки хранить её состояние после каждого фильтра.