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 つの列があるかのように機能します。最初の 2 番目の列は右に移動し、2 番目の 2 番目の列はわずかに左に移動します。スライドが完了すると、2 番目の列全体が適切な場所に戻ります。

テーブルをこのように動作させているのは何ですか?

注: hidden の 2 列目にデータがない場合、この効果は発生しません。'12/24/2011' と 'ガジェット' を取り出せば、すべて問題ないように見えます。

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 に答える