использование функции переключения jQuery в строке таблицы приводит к росту самой таблицы

Question

Я использую эффект переключения jQuery, связанный с событием click () 1 строки таблицы, чтобы переключать видимость следующей строки (которая также является последней строкой в ​​таблице). Если несколько раз подряд щелкнуть строку запуска, таблица, содержащая 2 строки, будет немного увеличиваться при каждом отображении строки переключения.

Вот jQuery, который я использую:

$(document).ready(function() {
    $(".sectionhead").click( function() {
        $(this).next("tr").toggle("150");
    });
});

Таким образом, после нескольких итераций таблица (в которой видна только строка заголовка tr.sectionhead) становится достаточно большой.

Есть ли встроенный способ, которым я могу избежать этого поведения, или есть какой-то способ сделать это в jQuery, который будет проще, чем то, что я делаю?

Редактировать

Мое реальное решение, предложенное ответом Скотта ниже (я не хочу классифицировать tr, который я переключаю, и оно будет видно для начала):

$(document).ready(function() {
    $(".sectionhead").toggle(
        function() {
            $(this).next("tr").hide();
        },
        function() {
            $(this).next("tr").show();
        }
    )
});

Answer 1

Существует некоторая странность среди разных браузеров с переключением TR. Если вы поместите border = "1" в таблицу в FF, вы увидите, как переключение работает (или не работает), как вы его в данный момент кодировали.

Если вы используете переключатель (fn, fn), он работает в FF и IE7. IE8 может быть другой историей - так что проверьте это. jQuery .toggle () не работает с TR в IE показывает исправление, если это так.

Следующее предполагает, что tfoot tr {display: none; } присутствует в вашем CSS.

$(function() {

    var $tr = $("tfoot tr");

    $(".sectionhead").toggle(
        function() {
            $tr.show();
        },
        function() {
            $tr.hide();
        }
    );

});

Answer 2

Я не думаю, что вы хотите использовать toggle (), поскольку toggle будет использовать метод show () и установить отображение элемента в 'block' В этом случае, я думаю, вы хотите иметь что-то более индивидуальное, которое установит отображение tr в 'table-row'.