筛选包含表的表的行

时间:2019-06-13 08:54:10

标签: javascript jquery html

我目前正在尝试实现一个搜索栏,该过滤器将过滤掉输入搜索栏中不包含文本的行。

我当前的解决方案正在工作,但不像我希望的那样工作,这是因为在表的每一行中,其中一列包含另一个表。

这是我的表格的html:

<table class="xxxxx" id="xxxx">
                    <thead>
                        <tr class="active">
                            <th style="width:30%">xxx</th>
                            <th style="width:30%">xxx</th>
                            <th style="width:25%" align="right">xxx</th>
                            <th style="width:2%"></th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr t-foreach="xxxxx" t-as="xxxxx">
                            <td>
                                <a "xxxxxxxxxxxxxxxxxx">
                                <span "xxxxxxxxx"/>
                                </a>
                            </td>
                            <td>
                                <span "xxxxxxxxxxx"/>
                            </td>
                            <td>
                                <span "xxxxxxxxx"/>
                            </td>
                            <td>
                                <table style="width:100%">
                                    <tr>
                                        <td>
                                            <div>
                                                <a>xxxxx</a>
                                            </div>
                                        </td>
                                        <td>
                                            <div>"xxxxxx"</div>
                                        </td>
                                    </tr>
                              </table>
                           </div>
                        </t>
                    </td>
                 </tr>
             </tbody>
  </table>

这是我当前的过滤器:

$("#search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#tableBody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

您可以看到我过滤了“ tableBody”中的所有“ tr”元素。这是一个问题,因为如果该行中的表又与过滤器不匹配,它将删除未过滤出的行中的表。我只想过滤第一个“ tr”元素,而不过滤那些“ tr”中的“ tr”元素。

如何做到/实现?

谢谢,

1 个答案:

答案 0 :(得分:2)

而不是...

$("#tableBody tr")

使用...

$("#tableBody > tr")

>意味着tr必须是#tableBody的直接子元素,它将忽略树下的所有其他tr元素