Javascript 搜索表并保留找到匹配项的完整表行

Question

我有一个包含大量数据的表。我希望我的用户能够搜索任何给定字段，如果找到匹配项，则完整的表格行将可见。

我首先做了这样的事情:

    $('.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>

有没有人尝试过类似的方法并知道解决问题的方法/技巧？

Answer 1

首先，不要获取 html

其次隐藏全部并显示你想要的

Live Demo

$("#body tr").hide(); // hide the TRs in the TBODY only
$("#body tr:contains('"+value+"')").show();

要使大小写不敏感，您需要破解包含:

https://stackoverflow.com/a/4936066/295783

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array)
  {
    return (elem.textContent || elem.innerText || '').toLowerCase()
    .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});

请注意，它将用作 :containsi 而不是 :contains

如果您有一个名为 id="search"的搜索框:

$(function() {
  $("#search").on("keyup",function() {
    $("#body tr").hide();
    $("#body tr:containsi('"+this.value+"')").show();
  });
});    

对于大表，请尝试

$(function() {
  $("#search").on("keyup",function() {
    $("#body tr").each(function() {
      var $row = $(this);
      $row.toggle($row.containsi('"+this.value+"')"));
    });
  });
});