Hide a table row with filtering jquery

Question

I have the following example http://jsfiddle.net/zidski/MxqRu/1/

When you click on 2010 I need valuation to disappear with the list items.

Here is the code which I am using to do this:

$("#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

Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.

UPDATE

I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.

UPDATE

I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo

Answer 2

I have done it in my project something like this:

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

Then in the CSS:

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

Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.

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