0

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

我写了一个例子。http://jsfiddle.net/B2Muh/2/

<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。

我希望任何人都可以帮助我，因为我不知道:)

编辑：现在我添加了标记

4

2 回答 2

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;
                }
            });
        });
    });
});
于 2013-07-24T06:33:02.573 回答
0

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

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


    });

});

在 JSFiddle 上查看它的实际应用

于 2013-07-24T06:40:29.770 回答