我目前正在尝试实现一个搜索栏,该过滤器将过滤掉输入搜索栏中不包含文本的行。
我当前的解决方案正在工作,但不像我希望的那样工作,这是因为在表的每一行中,其中一列包含另一个表。
这是我的表格的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”元素。
如何做到/实现?
谢谢,
答案 0 :(得分:2)
而不是...
$("#tableBody tr")
使用...
$("#tableBody > tr")
>
意味着tr
必须是#tableBody
的直接子元素,它将忽略树下的所有其他tr
元素