为什么在筛选表格数据时，我的表格标题会消失

Question

HTML和JavaScript

$("#btn10").click(function() {
$(".search-boxes").toggle()
}),
$("#comfilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#communication_mode_table tr").each(function(index) {
if (index !== 1) {
$row = $(this);
var id = $row.find("td:first").text().toLowerCase();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn10"><i class="fa fa-filter"></i> Filter</button>
<table id="communication_mode_table" class="table table-bordered table-hover">
<thead>
<tr>
<th>Nature Of Fault</th>
<th>Push Notification&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_push' id='all_push' class='all_push' </th>
<th>SMS&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_sms' id='all_sms' class='all_sms' />
</th>
<th>Call&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_call' id='all_call' class='all_call' />
</th>
<th>Email&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_email' id='all_email' class='all_email' />
</th>
</tr>
<tr class="search-boxes " style="display: none;">
<th>
<input id="comfilter" type="text" class="form-control" />
</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody> </tbody>
</table>

为什么在键入搜索框时，我的表头会消失？

如果我放

if(index !== 0)，搜索框本身从屏幕上消失了，有人能帮我找到解决方案吗？

有什么替代方案可以实现这个过滤器吗？

Answer 1

问题是，当您显然只想过滤tbody中的行时，您会过滤所有行。您需要调整您使用的选择器，然后也不需要index标准。

$("#btn10").click(function() {
$(".search-boxes").toggle()
}),
$("#comfilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#communication_mode_table tbody tr").each(function(index) {
$row = $(this);
var id = $row.find("td:first").text().toLowerCase();
if (id.indexOf(value) == -1) {
$row.hide();
} else {
$row.show();
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn10"><i class="fa fa-filter"></i> Filter</button>
<table id="communication_mode_table" class="table table-bordered table-hover">
<thead>
<tr>
<th>Nature Of Fault</th>
<th>Push Notification&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_push' id='all_push' class='all_push' </th>
<th>SMS&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_sms' id='all_sms' class='all_sms' />
</th>
<th>Call&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_call' id='all_call' class='all_call' />
</th>
<th>Email&nbsp;&nbsp;&nbsp;
<input type='checkbox' name='all_email' id='all_email' class='all_email' />
</th>
</tr>
<tr class="search-boxes " style="display: none;">
<th>
<input id="comfilter" type="text" class="form-control" />
</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tr><td>12</td><td>34</td><td>56</td><td>78</td><td>90</td></tr>
<tbody> </tbody>
</table>

Answer 2

您的代码似乎是错误的。

你的表体是空的，你在你的头球因此，尝试重新组织代码，将id值#communication_mode_table放在表体标记内容中，而不是头球