0

我有一个表格，其中一半数据被隐藏，可以通过按下按钮来展开。我在这里遵循模式。这是我的html：

<button class="toggleBtn">Hide/Show</button>
<table>
<tbody>
<tr>
    <td>Session Name : </td>
    <td>Generic name here</td>
</tr>
<tr>
    <td>Jump Date : </td>
    <td>12/25/2011</td>
</tr>
</tbody>
<tbody class="hiddenJumpSessionDetails" style="display:none;">
    
    <tr>
        <td>Created On : </td>
        <td>12/24/2011</td>
    </tr>
    <tr>
        <td>Inspector : </td>
        <td>Gadget</td>
    </tr>
    <tr>
        <td>Other Notes : </td>
        <td></td>
    </tr>
</tbody>

这是我的javascript：

<script>
$(document).ready(function()
{
    $(".toggleBtn").click(function()
    {
        $(".hiddenJumpSessionDetails").slideToggle();
    })
})

当隐藏部分向上/向下滚动时，表格就像有 3 列一样。第一个中的第二列向右移动，第二个中的第二列稍微向左移动。幻灯片完成后，整个第二列将移回正确的位置。

是什么让桌子以这种方式表现？

注意：当 hidden 的第二列中没有数据时，不会发生此效果。如果去掉“2011 年 12 月 24 日”和“小工具”，一切都会好起来的。

4

2 回答 2

2

看起来您没有在表格或列上设置任何宽度，因此它将是流动的。

尝试设置一些宽度。

于 2011-11-01T21:11:36.773 回答
0

display:block通过在您的tbody元素中设置并将元素隐藏在脚本中，我能够使其正常工作，如下所示：

<tbody style="display:block;" >
.
.
.
<tbody class="hiddenJumpSessionDetails" style="display:block;">

$(document).ready(function()
{
    $(".hiddenJumpSessionDetails").hide();
    $(".toggleBtn").click(function () {
      $(".hiddenJumpSessionDetails").slideToggle("slow");
    });
});

这是一个例子：http: //jsfiddle.net/aa7Kv/

于 2011-11-01T21:15:17.980 回答