Javascript 在html表中搜索时，AD将消失

你能从我这里查一下这段代码吗？我正在尝试对每一个列进行单独搜索，这段代码正在运行，问题是当我搜索到这些列时，它们都会消失

<style>
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search1" placeholder="Type to search">
<input type="text" id="search2" placeholder="Type to search">
<table id="table">
    <thead>
        <tr>Item</tr>
        <tr>Color</tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>Green</td>
        </tr>
        <tr>
            <td>Grapes</td>
            <td>Green</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>Orange</td>
        </tr>
    </tbody>
</table>

正文{padding:20px；}
输入{边距底部：5px；填充：2px 3px；宽度：98px；}
td{填充：4px；边框：1px#CCC实心；宽度：100px；}
项目
颜色
苹果
绿色
葡萄
绿色
橙色
橙色

这是搜索脚本

<script>
var $rows = $('#table tr'),
    searchVal1,
    searchVal2,
    td1,
    td2;

$('input').keyup(function () {
  searchVal1 = $('#search1').val(),
  searchVal2 = $('#search2').val();

  $rows.each(function (index, tr) {
    td1 = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
    td2 = $(tr).find('td:nth-of-type(2)').text().toLowerCase();

    if ( (td1.indexOf(searchVal1) != -1) && (td2.indexOf(searchVal2) != -1) ) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });

  if ((searchVal1 === '') && (searchVal2 === '')) {
    $rows.show();
  }
});
</script>

变量$rows=$（“#表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（）；
}
});

---

我从这个问题中得到了代码：

问题是使用

$（“#table tr'）

可以从表中获得所有行，包括第一行（表头）。你应该排除它

var$rows=$（“#表tr:not（：first）”，
搜索值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（）；
}
});

如果我的解决方案对您有所帮助，请将其标记为已接受