javascript - 使用固定的左标题列进行表格搜索

Question

我已经创建了一个固定的左列表，并希望合并一个将显示特定列而不是行的搜索。

到目前为止，我只找到了显示该行的: How to perform a real time search and filter on a HTML table

但由于我的标题在列中，因此这种方法效果不佳。

顺便说一句，我几乎是一个 javascript 菜鸟，所以请耐心等待......:p

请查看我的 codepen，它显示了我正在尝试做的事情。 http://codepen.io/genemiester/pen/qZrpgZ

var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

$rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
}).hide();
});

希望这很清楚？在此先感谢您的帮助!

Answer 1

更新的表格过滤器:
按照屏幕截图中显示的方式过滤数据。

只是我将 JS 代码中的 Table 更改为 Div 并且有些人做了一些 css 更改。
一次检查演示。

$(document).ready(function() {
    $("#clearsearch").click(function() {
        $("#clearsearch").fadeOut(300);
        $("#search").val("");
        $("#contentsearch div span").removeClass('success');
        $("#contentsearch div").removeClass('hide');
    });
    $("#search").keyup(function() {
        var result = $(this).val().replace(/ +?/g, "").toLowerCase();
        if (result != null && result != "") {
            $("#clearsearch").fadeIn(300);
            $("#contentsearch div").addClass('hide');
            $("#contentsearch div").find('span').each(function() {
                var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
                if (tbresult.indexOf(result) !== -1) {
                    $(this).closest('div').removeClass('hide');
                    $(this).addClass('success');
                } else {
                    $(this).removeClass('success');
                }
            });
        } else {
            $("#clearsearch").fadeOut(300);
            $("#contentsearch div").removeClass('hide');
            $("#contentsearch div span").removeClass('success');
        }
    });
});

.gap{ height: 10px;}
.hide{dispaly: none;}
#search{ padding-right: 15px;}
.form-group span{ position: relative; left: -24px; top: 3px; cursor: pointer; display: none;}
.form-group span:hover{ color: red;}
.success{
  background-color: #dff0d8;
}
.tableheads, #contentsearch div{
  border: 1px solid #ddd;
 box-shadow: 1px 0px 0px 0px rgba(221,221,221,1);
  float: left;
  display: inline-block;
}
.tableheads span, #contentsearch div span{
  padding: 8px;
  display: block;
  float: none;
  border-bottom: 1px solid #ddd;
}
.tableheads span{
  background-color: #f5f5f5;
}
.no-border-bottom{
  border-bottom: none !important;
}
.no-border-right{
  border-right: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="clearfix gap">
    </div>
    <div class="form-inline">
      <div class="form-group">
        <label>Search :
        </label>
        <input type="text" class="form-control" name="search" id="search" placeholder="Search">
        <span id="clearsearch" class="glyphicon glyphicon-remove">
        </span>
      </div>
    </div>
    <div class="clearfix gap">
    </div>
    <div class="tableheads no-border-right">
      <span>Name
      </span>
      <span>State
      </span>
      <span class="no-border-bottom">Location
      </span>
    </div>
    <div id="contentsearch">
      <div class="no-border-right">
        <span>John
        </span>
        <span>Telangana
        </span>
        <span class="no-border-bottom">Hyderabad
        </span>
      </div>
      <div class="no-border-right">
        <span>Nathaniel
        </span>
        <span>Andhrapradesh
        </span>
        <span class="no-border-bottom">Vijag
        </span>
      </div>
      <div class="no-border-right">
        <span>Charles
        </span>
        <span>Tamilnadu
        </span>
        <span class="no-border-bottom">Chennai
        </span>
      </div>
      <div class="no-border-right">
        <span>Christian
        </span>
        <span>Karnataka
        </span>
        <span class="no-border-bottom">Bangalore
        </span>
      </div>
    </div>
    <div class="clearfix gap">
    </div>
  </div>
</div>

表格 - 搜索演示:
以前的演示具有很棒的表格搜索选项。

$(document).ready(function() {
    $("#clearsearch").click(function() {
        $("#clearsearch").fadeOut(300);
        $("#search").val("");
        $("#tablecontent tbody tr td").removeClass('success');
        $("#tablecontent tbody tr").removeClass('hide');
    });
    $("#search").keyup(function() {
        var result = $(this).val().replace(/ +?/g, "").toLowerCase();
        if (result != null && result != "") {
            $("#clearsearch").fadeIn(300);
            $("#tablecontent tbody tr").addClass('hide');
            $("#tablecontent tbody tr").find('td').each(function() {
                var tbresult = $(this).text().replace(/ +?/g, "").toLowerCase();
                if (tbresult.indexOf(result) !== -1) {
                    $(this).closest('tr').removeClass('hide');
                    $(this).addClass('success');
                } else {
                    $(this).removeClass('success');
                }
            });
        } else {
            $("#clearsearch").fadeOut(300);
            $("#tablecontent tbody tr").removeClass('hide');
            $("#tablecontent tbody tr td").removeClass('success');
        }
    });
});

.gap{ 
    height: 10px;
}
.hide{ 
      dispaly: none;
}
#search{ 
      padding-right: 15px;
}
.form-group span{ 
      position: relative; 
      left: -24px; 
      top: 3px; 
      cursor: pointer; 
      display: none;
}
.form-group span:hover{ 
      color: red;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="row">
      <div class="clearfix gap"></div>
      <div class="form-inline">
         <div class="form-group">
            <label>Search :</label>
            <input type="text" class="form-control" name="search" id="search" placeholder="Search">
            <span id="clearsearch" class="glyphicon glyphicon-remove"></span>
         </div>
      </div>
      <div class="clearfix gap"></div>
      <table id="tablecontent" class="table table-bordered">
         <thead>
            <tr class="active">
               <th>S.No.</th>
               <th>Name</th>
               <th>Country</th>
               <th>Location</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>1</td>
               <td>John</td>
               <td>India</td>
               <td>Hyderabad</td>
            </tr>
            <tr>
               <td>2</td>
               <td>Nathaniel</td>
               <td>India</td>
               <td>Mumbai</td>
            </tr>
            <tr>
               <td>3</td>
               <td>Charles</td>
               <td>India</td>
               <td>Pune</td>
            </tr>
            <tr>
               <td>4</td>
               <td>Christian</td>
               <td>India</td>
               <td>Secunderabad</td>
            </tr>
         </tbody>
      </table>
   </div>
</div>