Динамически скрывая строки таблицы с помощью jQuery

Я пытаюсь чередовать фоновые цвета строк таблицы, каждый раздел начинается с одного цвета. Я добился этого с помощью следующего кода:

$(document).ready(function(){ $("tbody tr.row:nth-child(even)").css("background", "#efefef"); });

Мне также нужно иметь возможность ограничить количество строк (например, 5), видимых внутри каждого раздела tbody. Они должны быть в состоянии переключаться с помощью кнопки с событием .click (). Кто-нибудь знает, как мне этого добиться? Единственные решения, которые я придумала, вызвали нарушение цвета фона. Любая помощь будет принята с благодарностью!

Вот пример структуры таблицы:


    
        
            Cell Contents
            Cell Contents
        
        
            Cell Contents
            Cell Contents
        
        
            Cell Contents
            Cell Contents
        
    

    
        
            Cell Contents
            Cell Contents
        
        
            Cell Contents
            Cell Contents
        
        
            Cell Contents
            Cell Contents
        
    

Ответы на вопрос(3)

в которую поместятся 5 строк, а затем используйте css

переполнение: прокрутка; : D

 ktross18 авг. 2009 г., 23:57
Строки в конечном итоге разных размеров, так что, к сожалению, выигралработает очень хорошо. Спасибо за мысль, хотя! :)

Это делает это (проверено):

var rowLimit = 5;
$(document).ready(function() {
     $('button').click(function() {
        //hide everything after the rowLimit row
        $('table > tbody > tr:gt(' + (rowLimit - 1) + ')').toggle();
     });
 });

Ключ находится вСелектор GT

Чтобы предотвратить исчезновение стилей строк, поместите их в класс CSS и используйте вместо них addClass и removeClass, учитывая, что если онине в классе, то они нене существует :)

Решение Вопроса

Это должно сделать трюк:

$(function() {
    $('#showAll').click(function() {
        $('table > tbody').each(function() {
            $(this).children('tr:gt(4)').toggle();
        });
        $("tr:visible").filter(':odd').css("background", "#efefef").end()
            .filter(':even').css("background", "#ffffff");
    }).click();
});

Отредактировано для очистки кода (вдохновлено @ karim79 'с ответом).

 dcharles19 авг. 2009 г., 01:35
Когда я использую правилоtable tr { padding: 2px; } последний ряд, кажется, отображается правильно, независимо от видимости.
 ktross19 авг. 2009 г., 03:26
ktross.com/matrix  Вот мой код. Не уверен чтопроисходит с этим. :(
 ktross19 авг. 2009 г., 00:54
Это работало хорошо, но с одной проблемой. Похоже, что последний видимый tr не имеет заполнения, и после показа скрытых строк он имеет нормальное заполнение, но только что показанные строки имеют двойное заполнение. Кажется, это вещь Mozilla. Вы знаете, в чем проблема?
 dcharles19 авг. 2009 г., 01:30
Трудно сказать, не видя фактического CSS и HTML. Это может быть следствием непреднамеренного правила CSS или возможным в недопустимой структуре таблицы. Примечание. Я обновил ответ после того, как обнаружил ошибку в коде чередующейся строки.

Ваш ответ на вопрос