根据其他行中的内容过滤 HTML 表格行

Question

我的 HTML 网站中有一个表格，我有效地将其用作显示项目的列表。

每个项目都有：

• 列[0]中的图像
• 列[1]中的名称
• 列[2]中的描述

虽然比这稍微复杂一些，但 column[0] 和 [2] 有一个 rowspan="2"，并且每个项目在表中都有第二行，它的两个类别显示在 column[1] 中的名称下方。

这意味着它最终看起来像这样：- https://jsfiddle.net/vapdp54z/2

我想在我的网站上的某个地方设置复选框，默认情况下，没有勾选，所有项目都会显示。勾选复选框时，我希望隐藏不包含复选框内容作为其类别之一的所有项目。

我在 stackoverflow 上发现了类似的问题，它们做类似的事情，但它们对我不起作用，因为在我的情况下，我需要每隔一行检查一次，当找不到匹配项时，它需要隐藏该行和那一行上面。

谢谢。

Answer 1

如果您的复选框看起来像这样：

<div>
  <input type="checkbox" name="categories" value="CATEGORY1"> Category One<br>
  <input type="checkbox" name="categories" value="CATEGORY2"> Category Two<br>
  <input type="checkbox" name="categories" value="CATEGORY3"> Category Three<br>
  <input type="checkbox" name="categories" value="CATEGORY4"> Category Four <br>
</div>

然后你可以使用它们的值来隐藏任何带有 td 的包含匹配值的表行，也可以像这样隐藏前一行：

$(document).ready(function() {
    $('input[name=categories]').click(function() {
        // get the value of the clicked checkbox
        var cat = $(this).val();
        // select odd rows (the ones containing categories)
        $('tr:odd').each(function() {
            // get the td's in the row
            $('td', this).each(function() {
                // if the td html contains the category, 
                // hide its parent row and the previous row
                if ($(this).html().indexOf(cat) > -1)
                {
                    $(this).parent().css('display','none');
                    $(this).parent().prev().css('display','none');
                }
            });
        });
    });
});

当复选框未选中时，此解决方案不处理隐藏行的撤消，但这样做相当简单。

这是更新小提琴的链接：https://jsfiddle.net/vapdp54z/3/

我希望这会有所帮助！

编辑：我没有仔细阅读您的问题

如果您想隐藏所有不包含该类别的行，只需在 IndexOf() 检查中将 > 更改为 ==