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

Question

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

每个项目都有:

• 第 [0] 列中的图像
• 第 [1] 列中的名称
• 第 [2] 列中的说明

比这稍微复杂一些，column[0] 和 [2] 有一个 rowspan="2" 并且每个项目在表格中都有第二行，下面显示了两个类别[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');
                }
            });
        });
    });
});

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

这是更新后的 fiddle 的链接:https://jsfiddle.net/vapdp54z/3/

希望这会有所帮助!

编辑:我没有仔细阅读你的问题

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