在表行上使用jQuery切换功能会使表本身增长 [英] using jQuery toggle function on a table row makes table itself grow

问题描述

我正在使用挂钩到1个表行的click()事件的jQuery切换效果来切换下一行(也恰好是表的最后一行)的可见性.如果我连续多次单击触发行，则每次显示触发行时，包含两行的表都会增加一点.

I'm using the jQuery toggle effect hooked to the click() event of 1 table row to toggle the visibility of the next row (which also happens to be the final row in the table). If I click the firing row multiple times in succession, the table that contains the 2 rows grows a little every time the toggling row shows.

这是我正在使用的jQuery:

Here's the jQuery I'm using:

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

因此，经过几次迭代后，该表(其中只有可见的tr.sectionhead行)很大.

So after a few iterations, the table (which has only the tr.sectionhead row visible in it) is quite large.

是否有一种内置的方式可以避免这种行为，或者在jQuery中有某种比我正在做的方式容易的方式?

Is there a built-in way that I can avoid this behaviour, or is there some way of doing this in jQuery that would be easier than what I'm doing?

修改

我的实际解决方案由下面的ScottE的答案提出(我不想对我要切换的tr进行分类，并且从头开始就可以看到它):

My actual solution suggested by ScottE's answer below (I don't want to have to class the tr I'm toggling, and it will be visible to start with):

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

推荐答案

使用TR切换的不同浏览器之间存在一些怪异之处.如果您在FF的表格中放置border ="1"，您将看到当前编码时切换的工作原理(或无效).

There is some weirdness among different browsers with toggling TRs. If you place a border="1" in the table in FF you'll see how the toggling works (or doesn't) as you have it currently coded.

如果使用toggle(fn，fn)，似乎可以在FF和IE7中使用. IE8可能是一个不同的故事-因此也请进行检查. jQuery .toggle()无法在IE中使用TR 显示如果是这样的话，就可以解决.

If you go with a toggle(fn, fn) it seems to work in FF and IE7. IE8 could be a different story - so check it as well. jQuery .toggle() not working with TRs in IE shows a fix if that's the case.

以下假设tfoot tr {display:none; }存在于您的CSS中.

The following assumes that tfoot tr { display: none; } is present in your CSS.

$(function() {

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

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

});

这篇关于在表行上使用jQuery切换功能会使表本身增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！