Фильтр / поиск в таблице по двум столбцам и скрытие строк

Question

Я не могу понять следующее; У меня есть простой JS скрипт, который фильтрует / скрывает строки таблицы на основе значения поиска. Как я могу искать в двух столбцах td0 и td1 одновременно?

function myFunction() {
      // Declare variables 
      var input, filter, table, tr, td0,td1, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");

      
      for (i = 0; i < tr.length; i++) {
        td0 = tr[i].getElementsByTagName("td")[0];
        td1 = tr[i].getElementsByTagName("td")[1];

       // search first column
        if (td0) {
          txtValue = td0.textContent || td0.innerText;
          if (txtValue.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
          } else {
            tr[i].style.display = "none";
          }
        } 
       
       // search second column
       if (td1) {
              txtValue = td1.textContent || td1.innerText;
              if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            } 
      }
    }

Я уверен, что это неправильный подход. Я пытаюсь выполнить поиск по td0 и td1 одновременно. Любая помощь будет очень признательна!

Answer 1

Я просто разобрался. Супер простой JQuery:

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

Даже не знаю, как я это пропустил. В любом случае спасибо за помощь!

Answer 2

Javascript может работать только с одним потоком. Если вы действительно хотите запускать эти два кода одновременно, вам нужно использовать Web Workers для использования потоковой передачи, но я думаю, что это будет излишним для этой задачи.

Вы можете каким-то образом запустить его вместе, используя setTimeout, но на самом деле он не будет работать параллельно, потому что он однопоточный. Примечание: это хитрый способ сделать это.

Пример:

setTimeout(function() {
    //search td1
},0);

setTimeout(function() {
    //search td2
},0);

Я предлагаю вам использовать $.Deferred, намного лучше.

Веб-воркеры: ссылка отложено: ссылка