表格列在 jQuery.slide() 期间发生变化

发布于 2024-12-13 07:40:34 字数 1291 浏览 3 评论 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 列一样。第一个中的第二列向右移动，第二个中的第二列稍微向左移动。幻灯片完成后，整个第二列将移回到正确的位置。

是什么让桌子变成这样？

注意：当隐藏的第二列中没有数据时，不会发生这种效果。如果“12/24/2011”和“Gadget”被取出，一切看起来都会很好。

原文

I have a table where half the data is hidden, and can be expanded by pressing a button. I am following the pattern here. Here is my 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>

Here is my javascript:

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

While the hidden part is scrolling up/down, the table acts as though there are 3 columns. The second column in the first moves to the right, the second column in the second moves slightly closer to the left. The entire second column moves back to the proper place once the slide is complete.

What is making the table behave this way?

Note: this effect doesn't happen when there is no data in the second column in the hidden . If the '12/24/2011' and 'Gadget' were taken out, everything would seem fine.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

檐上三寸雪 2024-12-20 07:40:34

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

尝试设置一些宽度。

回复收藏 0 原文

梦屿孤独相伴 2024-12-20 07:40:34

我可以通过在 tbody 元素中设置 display:block 并将该元素隐藏在脚本中来使其正常工作，如下所示：

<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/

I was able to get this to work correctly by setting display:block within your tbody elements and hiding the element within the script like so:

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

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

Here's an example: http://jsfiddle.net/aa7Kv/

回复收藏 0 原文

~没有更多了~