Javascript 使用js或jquery进行表行筛选

我对js或jquery不是很熟悉，但我有一个带有一些条目的表。现在，我想通过左侧的列表筛选此表

我写了一个例子

过滤器参数1：


过滤器参数2：



雅虎
GPH_东部
谷歌
Q_est

这个例子很简单。所以我想要的是，我可以点击任何一个过滤器参数1，将其设置为激活状态，表格显示所有带有第一个参数的条目，然后如果我点击任何一个过滤器参数2，表格将只显示带有第一个和第二个参数的条目

我使用python和django

我希望任何人都能帮助我，因为我不知道：）

---

编辑：现在我添加了标记，使用一些缓慢、简单、详尽的检查模拟了您所要求的功能--

$（函数（）{
$filterArgs=$（“ul li”）.filter（函数（）{
var txt=$（this.text（）；
返回txt.indexOf（“过滤器”）<0；
});
$filterArgs.单击（函数（）{
$（this.toggleClass（'active'）；
$（“表tr”）.hide（）；
$（“表tr td”）。每个（函数）{
$rowData=$（此项）；
$filterArgs.filter（“.active”）。每个（函数（）{
if（$rowData.text（）==$（this.text（））{
$rowData.parent（）.show（）；
返回false；
}
});
});
});
});

我已经编写了一个示例代码。我想这就是你想要的

    $('body').on('click','li',function(){

    var filterText=$(this).html().trim();
    var splicedTextArray=filterText.split(" ");
    var filter=splicedTextArray[0].toLowerCase();

    $('tr').each(function(index,value){

        var valueText=$(this).find('td:first').html();
        var isRegexmatch=valueText.toLowerCase().indexOf(filter);

        if(isRegexmatch<0)
        {
        $(this).hide();
        }else
        {
        $(this).show();
        }


    });

});

$（'body'）。在（'click'，'li'，function（）上{
var filterText=$（this.html（）.trim（）；
var stipedTextArray=filterText.split（“”）；
var filter=SpicedTextArray[0]。toLowerCase（）；
$（'tr'）。每个函数（索引、值）{
var valueText=$（this.find（'td:first'）.html（）；
var isRegexmatch=valueText.toLowerCase（）.indexOf（过滤器）；
if（isRegexMatch）您是否能够修改html标记，如添加一些类属性等（这是在您进行修改之前，但您应该能够按照此模式进行更改）它工作得很好，但是如果我选择一个过滤参数1和一个过滤参数2，它会显示所有带有参数1的条目和所有带有参数2的条目。我希望这样，如果我选择两个参数，那么只显示带有第一个参数和第二个参数的条目。很抱歉，我放错了链接。现在您可以看到它了。sry但是doe如果我选择参数1，然后选择参数2，则不起作用。您可以调整代码以使其成为可能。这只是一个用于演示的模型。我在上面的JSFIDLE链接中没有发现错误。如果您更改了代码，请提供链接，以便我可以检查.thx以了解您的解决方案，但另一个更适合我的问题：）
$(function () {
    $filterArgs = $("ul li").filter(function () {
        var txt = $(this).text();
        return txt.indexOf("Filter") < 0;
    });
    $filterArgs.click(function () {
        $(this).toggleClass('active');
        $("table tr").hide();
        $("table tr td").each(function () {
            $rowData = $(this);
            $filterArgs.filter(".active").each(function () {
                if ($rowData.text() == $(this).text()) {
                    $rowData.parent().show();
                    return false;
                }
            });
        });
    });
});

    $('body').on('click','li',function(){

    var filterText=$(this).html().trim();
    var splicedTextArray=filterText.split(" ");
    var filter=splicedTextArray[0].toLowerCase();

    $('tr').each(function(index,value){

        var valueText=$(this).find('td:first').html();
        var isRegexmatch=valueText.toLowerCase().indexOf(filter);

        if(isRegexmatch<0)
        {
        $(this).hide();
        }else
        {
        $(this).show();
        }


    });

});