javascript - HTML/Javascript 在表格中查找但不包括不可搜索区域

Question

想集成一个过滤功能。我想在 TBODY-Tag 中搜索。我的 Javascript 适用于 TBODY-Tag 中的所有内容。但是有些地方不应该被搜索。一个想法如何实现这一点？

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>

标签： javascripthtmlsearchfind

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>