javascript - 使用jquery过滤隐藏表行

Question

我有以下示例 http://jsfiddle.net/zidski/MxqRu/1/

当您点击 2010 年时，我需要评估才能与列表项一起消失。

这是我用来执行此操作的代码:

$("#yearfilter a").live("click", function(e) {
                e.preventDefault();
                //var v = $(this).val();
                var v = $(this).attr("data-value");
                if(v.length > 0) {
                    $('tr.reports').show();
                    $('tr.reports ul').hide();
                    $('tr.reports ul.year-'+v).show();
                    $('tr.reports').each(function() {
                        if($('ul:visible', this).size() == 0) {
                            $(this).hide();
                        }
                    });
                } else {
                    $('tr.reports').show();
                    $('tr.reports ul').show();
                }
            });

Answer 1

我在我的项目中做了这样的事情:

function toggleRow(row_id) {
    row_selector = "#row_" + row_id;
    $(row_selector).toggleClass("shown hidden")
}

然后在 CSS 中:

.hidden {display:none;}
.shown {}

然后在 HTML 中，我有交替的表格行，其中奇数行充当偶数行内容的标题。单击奇数行可切换相应偶数行的可见性。

...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...