Блог

У меня есть следующий пример 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();
                }
            });
  

Я сделал это в своем проекте примерно так:

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

Дайте каждому tr идентификатор что-то вроде id="row_2010" , затем найдите это и скройте всю строку целиком сразу.

Обновить

Я бы настоятельно рекомендовал не использовать так много таблиц и использовать больше классов для классификации вашей структуры данных. Это помогло бы вашему javascript быть намного более чистым, кратким и простым в использовании.

Обновить

Я скорректировал весь ваш javacsript и часть вашего html. Вот полностью рабочий пример демонстрации jsFiddle