Question

想要集成过滤器功能。我想在TBODY标签中搜索。我的Javascript对于TBODY-Tag中的所有Content都适用。但是有些地方不应该被搜索。一个想法如何实现这一目标？

Javascript：

$(document).ready(function(){
    $("#myInput").keyup(function(){
        filter = new RegExp($(this).val(),'i');
        $("#myTable tbody").filter(function(){
            $(this).each(function(){
                found = false;
                $(this).children().each(function(){
                    content = $(this).html();
                    if(content.match(filter))
                    {
                        found = true;
                    }
                });
                if(!found)
                {
                    $(this).hide();
                }
                else
                {
                    $(this).show();
                }
            });
        });
    });
});

HTML：

 <input id="myInput" type="text" name="search" />
    <table id="myTable">
        <tbody>
            <tr>
                <td>
                    That's great searchable content.
                </td>
            </tr>
            <tr>
                <td>
                    That's great searchable content.
                    <div>That's also great content, but non searchable</div>
                </td>
            </tr>
        </tbody>
        <tbody>
           ...
        </tbody>
    </table>

Answer 1

以下解决方案对我有用：

JavaScript

$(document).ready(function(){
    $("#inputSearch").keyup(function(){
        filter = new RegExp($(this).val(),'i');
        $("#tableServiceplan tbody").filter(function(){
            $(this).each(function(){
                found = false;
                $(this).find("#searchable").each(function(){
                    content = $(this).html();
                    if(content.match(filter)){
                        found = true;
                    }
                });
                if(!found){
                    $(this).hide();
                }
                else{
                    $(this).show();
                }
            });
        });
    });
});

HTML：

<input id="myInput" type="text" name="search" />
<table id="myTable">
<tbody>
  <tr>
      <td>
          <div id="searchable">That's great searchable content.</div>
     </td>
  </tr>
  <tr>
     <td>
          <div id="searchable">That's great searchable content.</div>
          <div>That's also great content, but non searchable</div>
    </td>
  </tr>
</tbody>
<tbody>
  ...
</tbody>
</table>

Answer 2

这是解决方案：

Javascript：

$(document).ready(function(){
    $("#inputSearch").keyup(function(){
        filter = new RegExp($(this).val(),'i');
        $("#tableServiceplan tbody").each(function(){
                found = false;
                $(this).find(".searchable").each(function(){
                    content = $(this).html();
                    if(content.match(filter)){
                        console.log($(this).html);
                        found = true;
                    }
                });
                if(!found){
                    $(this).hide();
                }
                else{
                    $(this).show();
                }
        });
    });
});

HTML：

<input id="myInput" type="text" name="search" />
<table id="myTable">
<tbody>
  <tr>
      <td>
          <div class="searchable">That's great searchable content.</div>
     </td>
  </tr>
  <tr>
     <td>
          <div class="searchable">That's great searchable content.</div>
          <div>That's also great content, but non searchable</div>
    </td>
  </tr>
</tbody>
<tbody>
  ...
</tbody>
</table>

在表中查找HTML / Javascript，但不包括不可搜索的区域

2 个答案: