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(); 
});