Javascript搜索表并保留找到匹配项的完整表行
我有一个包含大量数据的表。我希望我的用户能够搜索任何给定字段，如果找到匹配项，则完整的表行将可见 我一开始是这样做的：Javascript搜索表并保留找到匹配项的完整表行,javascript,jquery,filter,Javascript,Jquery,Filter,我有一个包含大量数据的表。我希望我的用户能够搜索任何给定字段，如果找到匹配项，则完整的表行将可见 我一开始是这样做的： $('.table_column').each(function(){ var content = $(this).html(); if(!content.toUpperCase().contains(value.toUpperCase())){ $(this).hide() } }); <?php if (isset($
$('.table_column').each(function(){
var content = $(this).html();
if(!content.toUpperCase().contains(value.toUpperCase())){
$(this).hide()
}
});
<?php if (isset($vars['excel'])): ?>
<table class="table table-striped table-bordered table-hover" id="<?php echo $vars['list_id']?>">
<thead>
<tr>
<th class="table-header">
<input type="checkbox" id="select_all"/>
</th>
<th class="table-header">
<img src="/site/resources/images/outlook.png">
</th>
<th class="table-header">
<i class="fa fa-phone"></i>
</th>
<th id="phone_sort" class="table-header"> Telefon <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="company_sort" class="table-header">
Selvskab <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th >
<th id="zip_sort" class="table-header">
Postnr <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="name_sort" class="table-header">
Fulde navn <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="email_sort" class="table-header">
Email <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th class="table-header">
<i class="fa fa-ban " style="color:#ff4330"></i>
</th>
</tr>
</thead>
<tbody id="body">
<?php
$excel = $vars['excel'];
for ($i = 1; $i <= count($excel); $i++): ?>
<tr class="table_elements" style="cursor: pointer">
<td>
<input type="checkbox" class="" id="<?php echo $excel[$i]['row'] ?>" />
</td>
<td>
<img src="/site/resources/images/outlook.png">
</td>
<td>
<i class="fa fa-phone"></i>
</td>
<td class="table_column">
<?php echo $excel[$i]['telephone'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['provider'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['zip_code'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['first_name'] . ' ' . $excel[$i]['last_name'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['email'] ?>
</td>
<td>
<i class="fa fa-ban " style="color:#ff4330"></i>
</td>
</tr>
<?php endfor; ?>
</tbody>
</table>
$('.table_column').each(function(){
var content = $(this).html();
if(!content.toUpperCase().contains(value.toUpperCase())){
$(this).hide()
}
});
<?php if (isset($vars['excel'])): ?>
<table class="table table-striped table-bordered table-hover" id="<?php echo $vars['list_id']?>">
<thead>
<tr>
<th class="table-header">
<input type="checkbox" id="select_all"/>
</th>
<th class="table-header">
<img src="/site/resources/images/outlook.png">
</th>
<th class="table-header">
<i class="fa fa-phone"></i>
</th>
<th id="phone_sort" class="table-header"> Telefon <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="company_sort" class="table-header">
Selvskab <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th >
<th id="zip_sort" class="table-header">
Postnr <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="name_sort" class="table-header">
Fulde navn <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th id="email_sort" class="table-header">
Email <i class="fa fa-angle-down" style="float: right;"></i>
<span class="hidden">sort_asc</span>
</th>
<th class="table-header">
<i class="fa fa-ban " style="color:#ff4330"></i>
</th>
</tr>
</thead>
<tbody id="body">
<?php
$excel = $vars['excel'];
for ($i = 1; $i <= count($excel); $i++): ?>
<tr class="table_elements" style="cursor: pointer">
<td>
<input type="checkbox" class="" id="<?php echo $excel[$i]['row'] ?>" />
</td>
<td>
<img src="/site/resources/images/outlook.png">
</td>
<td>
<i class="fa fa-phone"></i>
</td>
<td class="table_column">
<?php echo $excel[$i]['telephone'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['provider'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['zip_code'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['first_name'] . ' ' . $excel[$i]['last_name'] ?>
</td>
<td class="table_column">
<?php echo $excel[$i]['email'] ?>
</td>
<td>
<i class="fa fa-ban " style="color:#ff4330"></i>
</td>
</tr>
<?php endfor; ?>
</tbody>
</table>
有没有人尝试过类似的方法并知道如何解决这个问题？首先，不要获取html 其次，隐藏一切，展示你想要的 要使其不区分大小写，您需要破解包含： 请注意，它将用作：containsi而不是：contains 如果您有一个名为id=“search”的搜索框： 想要一张大桌子，试试看
$(function() {
$("#search").on("keyup",function() {
$("#body tr").each(function() {
var $row = $(this);
$row.toggle($row.containsi('"+this.value+"')"));
});
});
});
这是一个如何做到这一点的例子，这比另一个例子要详细一些，但是添加更多您自己的逻辑可能更容易 在我的示例中，如果任何书面单词与一行中td的某个部分匹配，则将显示一行 这是小提琴： 另一方面，如果有大量数据，我建议改为服务器端搜索，使用足够大的数据集会更快 首先是HTML：
What are you looking for: <input type="text" id="searchbox"> <br />
<table id="searchMe">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
</tr>
</table>
这似乎是一个很好的解决方案。我相信还有更有效的方法，但很难比两行代码的可读性更好。我唯一感到不安的是，这将迭代所有行两次（一次隐藏，然后再次检查它们是否匹配要显示的筛选器）。这可能会被
的使用所颠覆。我必须对每个进行测试，但我添加了一个each
What are you looking for: <input type="text" id="searchbox"> <br />
<table id="searchMe">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td>five</td>
<td>six</td>
</tr>
</table>
$("#searchbox").keyup(function () { // listen to every key press
var searchterms = $("#searchbox").val().toLowerCase().split(' '); // break apart your search terms to an array
$('#searchMe tr').each(function (i, row) { // go through all table rows
$(row).hide(1); // hide the row initially
$("td", row).each(function (y, td) {
var tdValue = $(td).text().toLowerCase(); // go through each td value
searchterms.forEach(function (entry) {
if (tdValue.indexOf(entry) != -1) {
$(row).show(1); // and show the entire row if we get a match on any of our search terms
}
});
});
});
});