Javascript 如何通过两个输入文本字段组合表中的搜索？

我的桌子看起来像这样：

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

请看此示例以更好地理解我的问题：

---

我使用第一个输入字段筛选表行。然后，当我使用第二个输入字段时，不包括第一次搜索的结果。如何修复它？

应用筛选器时，首先显示所有行，否定之前对它们进行的任何筛选。这是解决这个问题的一个办法。。。它存储过滤器，并根据您的小提琴将两者应用于任一输入的键控事件

var $rows = $('#table tr');
var filters = { col1: '', col2: ''};
$('#search1').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col1 = val;
    applyFilters();
});
$('#search2').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col2 = val;
    applyFilters();
});
function applyFilters() {
    $rows.show();
  $rows.filter(function() {
        var text = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col1);
    }).hide();
  $rows.filter(function() {
    var text = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col2);
    }).hide();
};

---

你目前的逻辑有点混乱。您正在重新显示和隐藏每个搜索字段的筛选项。您真正想要的是一次过滤所有内容，如下所示：

var$rows=$（'#table tr'）；
$（'search1，'search2'）。on（'input'，function（）{
var val1=$.trim（$（'#search1'）.val（））.replace（/+//g'，）.toLowerCase（）；
var val2=$.trim（$（'#search2'）.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（））{
var text1=$（this.find（'td:nth child（1）'）.text（）.replace（/\s+/g'，）.toLowerCase（）；
var text2=$（this）.find（'td:nth child（2）'）.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text1.indexOf（val1）| |！~text2.indexOf（val2）；
}).hide（）；
});
body{padding:20px；}
输入{边距底部：5px；填充：2px 3px；宽度：98px；}
td{padding:4px；border:1px#CCC solid；width:100px；}

苹果
绿色
葡萄
绿色
橙色
橙色
您可以使用
each（）来完成它。
。此代码将为每个
keyup（）
收集每个输入的值，然后如果此值通过
indexOf（）
存在于相应的
td
中，它将显示包含此
td
的
tr
，并隐藏其他值，否则它将显示所有
tr



var$rows=$（'#table tr'），
搜索值1，
搜索值2，
td1，
td2；
$（'input'）.keyup（函数（）{
searchVal1=$（'#search1'）.val（），
searchVal2=$（'#search2'）.val（）；
$rows.each（函数（索引，tr）{
td1=$（tr）.find（'td:n类型（1）'）.text（）.toLowerCase（），
td2=$（tr）.find（'td:nth of type（2）'）.text（）.toLowerCase（）；
if（（td1.indexOf（searchVal1）！=-1）和&（td2.indexOf（searchVal2）！=-1））{
$（this.show（）；
}否则{
$（this.hide（）；
}
});
如果（（searchVal1==“”）和&（searchVal2==“”））{
$rows.show（）；
}
});
body{padding:20px；}
输入{边距底部：5px；填充：2px 3px；宽度：98px；}
td{padding:4px；border:1px#CCC solid；width:100px；}

苹果
绿色
葡萄
绿色
橙色
橙色
什么是“第二个输入字段”？@JosephMarikle抱歉，我举了一个错误的例子。我刚刚更新了一个正确的问题。
var $rows = $('#table tr');
var filters = { col1: '', col2: ''};
$('#search1').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col1 = val;
    applyFilters();
});
$('#search2').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    filters.col2 = val;
    applyFilters();
});
function applyFilters() {
    $rows.show();
  $rows.filter(function() {
        var text = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col1);
    }).hide();
  $rows.filter(function() {
    var text = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(filters.col2);
    }).hide();
};