Filter rows of a table containing tables

Question

I'm currently trying to implement a search bar that will filter out rows who do not contain the text in the input search bar.

My current solutions is working but not like I would like it to work, this because in each row of the table, one of the columns contains another table.

Here is the html of my table:

<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>

and this is my current filter:

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

As you can see I filter on all the "tr" elements in "tableBody". This is a problem because it will remove the table in rows that are not filtered out, if the table in this row does in turn not match the filter. I would like to only filter on the first "tr" and not on "tr" elements in those "tr".

How can this be done/achieved?

Thanks in advance,

Answer 1

Instead of...

$("#tableBody tr")

Use...

$("#tableBody > tr")

The > means that the tr must be an immediate child of #tableBody and it will ignore all the other tr elements lower down the tree