Question

我与js或jquery不是很接近，但我有一个带有一些条目的表。现在我想通过左侧的列表过滤此表。

<ul class="filter">
    <li class="filter-header"> Filter argument 1: </li>
    <li><a href="#"> Yahoo </a></li>
    <li><a href="#"> Google </a></li>
    <li class="filter-header"> Filter argument 2: </li>
    <li><a href="#"> GPH_est </a></li>
    <li><a href="#"> Q_est </a></li>
</ul>

<div class="tableResult">
    <table class="table">
        <tr>
            <td>Yahoo</td>
            <td>GPH_est</td>
        </tr>
        <tr>
            <td>Google</td>
            <td>Q_est</td>
        </tr>
    </table>
</div>

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

我使用python和django。

我希望有人可以帮助我，因为我不知道：）

编辑：现在我添加了标记

Answer 1

使用一些缓慢，简单，详尽的检查来模拟您请求的功能。 - http://jsfiddle.net/B2Muh/3/

$(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;
                }
            });
        });
    });
});

Answer 2

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

    $('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();
        }


    });

});

<强> See it in action on JSFiddle

使用js或jquery进行表行过滤

2 个答案: