如何在HTML表上执行实时搜索和过滤

Question

如何在HTML表上执行实时搜索和过滤我一直在谷歌搜索和搜索Stack Overflow一段时间，但我无法解决这个问题。我有一个标准的HTML表，包含水果。像这样：<table>    <tr>       <td>Apple</td>       <td>Green</td>    </tr>    <tr>       <td>Grapes</td>       <td>Green</td>    </tr>    <tr>       <td>Orange</td>       <td>Orange</td>    </tr></table>在上面我有一个文本框，我想在表中搜索用户类型。因此，如果他们输入Gre例如，表中的橙色行将消失，留下Apple和Grapes。如果他们继续并打字Green Gr苹果行应该消失，只留下葡萄。我希望这很清楚。并且，如果用户从文本框中删除了部分或全部查询，我希望现在所有与查询匹配的行重新出现。虽然我知道如何删除jQuery中的表行，但我不知道如何根据此选择性地进行搜索和删除行。有一个简单的解决方案吗？还是一个插件？如果有人能指出我正确的方向，它将是辉煌的。谢谢。