Question

我有一个表格，其中包含一些隐藏的行和一个可点击的按钮，可以显示这些隐藏的行。问题是，当我使用链接时，行会显示但是身体不会更新它的高度。（但是当我打开chrome控制台并关闭它时它会更新）

的CSS：

table tr.hide-row {
   display:none;
}

jquery的：

$(document).on('click', 'a.openallrows', function(e) {
    $('.hide-row').show();
    e.preventDefault();
});

HTML

<table>
    <tbody>
        <tr>
            <td colspan="4">visible</td>
        </tr>
        <tr class="hide-row">
            <td>This is hidden</td>
            <td>-</td>
            <td>--</td>
            <td>---</td>
        </tr>
    </tbody>
</table>

我有很多隐藏的行。当它们全部显示出来时，它们会与页面页脚重叠，这不是我想要的......

更新！

<div class="grid" style="width: 272.5px; left: 0px; top: 10px; position: absolute;">
     table is inside here  
</div>

表位于绝对位置的网格内！该位置由BlocksIt.js

自动添加

Answer 1

试试这个css代码

table{
height:auto !important;
}

Answer 2

如果您更改包含div，会发生什么：

<div class="grid" style="width: 272.5px;margin-top:10px;">
     table is inside here  
</div>

Answer 3

我有一个很酷的主意。

您可以轻松地在其周围放置一个高度和宽度为100％的容器，然后将其高度和父元素的高度抓取到方框。

每次打开一个新框时，将其与容器的高度进行比较，如果两者之间的边距变小，则添加到容器的高度。

我做了个小提琴。我在高度上使用了增量代码。想象一下，红色框是你的“隐藏行”类。在这种情况下（因为我按下了时间），我假装增加40px（这将代表td的高度。）每次增加时，如果在下面的添加中超过最大余量，则容器增加。所以我增加了容器的高度。我建议您的容器包含整个页面。

$(".higher").click(function(){
    var allheight = $(".all").height() - 80;
    var red = $(".higher").height();
    $(".higher").css("height", "+=40px");
    if(red > allheight){
        $(".all").css("height", "+=40px");
    }
});

Click Here to see it.

您可以根据需要在此部分中放置尽可能多的块列。

Answer 4

该块与页脚重叠，因为它没有更新其高度值。幸运的是，我能够找到一个不同的脚本来布局块。它具有向自身调用刷新的功能，因此它不会与其他元素重叠。

如果有人遇到过类似的问题，我建议你试一试 https://github.com/GBKS/Wookmark-jQuery它具有与BlocksIt.js相同的功能，甚至更多。

这是我发现Wookmark有$('.grid').trigger('refreshWookmark');项目非常必要的功能，它会刷新块。

Show（）和隐藏表行

4 个答案: