javascript - Jquery 按两个值过滤

Question

这次我遇到了 jQuery 过滤的问题。

$( document ).ready(function() {
    $('#search').keyup(function() {
         var s = new RegExp(this.value);
         $('#support-tasks-table tbody tr').each(function() {
             if(s.test(this.cells[8].innerHTML))
                 $(this).show();
             else $(this).hide();
         });
    });
    $('select#sel-supporttask-projects').change(function() {
        var s = new RegExp(this.value);
        $('#support-tasks-table tbody tr').each(function() {
            if(s.test(this.cells[3].innerHTML)) $(this).show();
            else $(this).hide();
        });
    });
})

每个函数都按单元格值隐藏或显示表 tr，并且工作正常。但是当我在搜索中设置一些东西，然后我从 select 中选择选项时，它会忽略 tr 被隐藏并从表中的所有 tr 中搜索。有什么简单的方法可以将此代码更改为仅通过显示的 tr 进行搜索？

Answer 1

简单的答案是将 :visible 添加到选择器中:

$('select#sel-supporttask-projects').change(function() {
    var s = new RegExp(this.value);
    $('#support-tasks-table tbody tr:visible').each(function() {
        if(s.test(this.cells[3].innerHTML)) $(this).show();
        else $(this).hide();
    });
});

但它突出了一个设计缺陷:如果您选择不同的选项，您会希望一些以前不可见的答案变得可见。

基本上，您需要有一个包含两个搜索过滤器的 searchParameters 类:

var searchParameters = {
    supportTask: null,
    searchRegex: null
};

function shouldRowBeVisible(row) {
   if(searchParameters.supportTask) {
      if(!(searchParameters.supportTask.test(row.cells[3].innerHTML))) {
          return false;
       }
   }
   if(searchParameters.searchRegex) {
                if(!(searchParameters.searchRegex.test(row.cells[3].innerHTML))) {
          return false;
       }
   }
   return true;
}


function updateVisibility() {
   $('#support-tasks-table tbody tr').each(function() {
       if(shouldRowBeVisible(this) {
         $(this).show();
       } else {
         $(this).hide();
       }
    });
}

 $('#search').keyup(function() {
     searchParameters.searchRegex = new RegExp(this.value);
     updateVisibility();
});
$('select#sel-supporttask-projects').change(function() {
    searchParameters.supportTask = new RegExp(this.value);
    updateVisibility();
});