jQuery：按文本或HTML5数据属性过滤表

Question

我有一个包含多个列和行的表，其中包含HTML5 data-attribute 。 在阅读了相当多的SO问题和答案之后，我尝试开发代码，允许通过文本或data-attribute实时搜索表格，但我被卡住了。 我已经得到了相同的代码来处理<li>元素（请参阅这里的 jsFiddle），所以我认为我的问题在于我的jQuery选择器。 有人对我做错了什么有建议吗？

HTML：

<input id="search" placeholder="search" />
<table>
    <tr>
        <th colspan="4">
            California
        </th>
    </tr>
    <tr>
        <td>Name</td>
        <td>Company</td>
        <td>Link</td>
        <td>Notes</td> 
    </tr>
    <tr data-state="california">
      <td>Joe Smith</td>
      <td>Acme</td>
      <td>www.www.com</td>
      <td>n/a</td>
    </tr>
    <tr data-state="california">
      <td>Sue Smith</td>
      <td>Acme</td>
      <td>www.www.com</td>
      <td>n/a</td>
    </tr>
    <tr data-state="california">
      <td>Frank Jones</td>
      <td>Etc</td>
      <td>www.www.com</td>
      <td>n/a</td>
    </tr>
    <tr>
        <th colspan="4">
            Alaska
        </th>
    </tr>
    <tr data-state="alaska">
      <td>Sue Henderson</td>
      <td>Acme</td>
      <td>www.com.com</td>
      <td>n/a</td>
    </tr>
    <tr data-state="alaska">
      <td>Jimmy Dean</td>
      <td>Acme</td>
      <td>www.com.com</td>
      <td>n/a</td>
    </tr>
</table>

jQuery的：

$("input#search").keyup(function(){
        var filter = $(this).val();
        var regExPattern = "gi";
        var regEx = new RegExp(filter, regExPattern);   
        $("table tr").each(function(){
        if (
        $(this).text().search(new RegExp(filter, "i")) < 0 &&
        $(this).data('state').search(regEx) < 0 
        ){
                $(this).hide();
            } else {
                $(this).show();
            }        
        });
});

jsfiddle： http ： //jsfiddle.net/Q3cvH/17/

Answer 1

你有3个tr元素，没有你无法调用的data-state属性.search on。

在尝试对其进行.search之前，您应该检查data-state存在，如下所示：

if($(this).data('state'))

演示。