javascript - 在不删除折叠行的情况下搜索表

Question

所以基本上我有一个表，我正在使用 list.js 的搜索来搜索表。我还使用 mark.js 突出显示结果。您可以在以下链接中查看工作版本。

<tbody class="list context">
    <tr class="parent">
      <td class="name">Abraham</td>      
      <td class="city foo" data-foo="foo bar">Stockholm</td>
      <td><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">+</button></td>
    </tr>
    <tr class="child">
      <td class="collapse" colspan="3" id="collapseExample1">
        foo bar
      </td>
    </tr>
</tbody

代码笔

好的，所以 .child 行可以通过单击按钮折叠。现在，当我搜索“Abraham”时，它会删除相邻的 .child 行。这是需要发生的事情：显示每个 .parent 行，如果它与 searchinput 匹配，但不要删除 .child，即使它与输入不匹配。

向我展示每个“父行”，即使它与输入不匹配，但折叠的“子行”确实匹配。

如果它们都不匹配输入，则仅删除“父子行”。

我什至不知道我的方法是否是正确的方法，它确实感觉很老套，所以我也对其他想法持开放态度。

问候 KDB

标签： javascripthtmlbootstrap-4list.js