0

編集：解決しました。ページが最初にロードされると、レイアウトされた css ファイルを使用してデータテーブルが形成されます。ただし、javascript を呼び出すと、データテーブルが再構築され、参照した CSS ファイルが無視されました。そのため、テキストのサイズに合わせてテーブルを自動的に縮小していました。これは、データテーブルの実際の作成で bAutoWidth = false を設定することで回避されました。

助けてくれたみんなに感謝します！

だから私は次のようなデータテーブルを持っています。

   <div class="datatable" style="display:none;">
            <div class="row">
                <table class="display" id="testtable">
                    <thead>
                        <tr>
                            <th>First column</th>
                            <th>Second</th>
                            <th>Third</th>
                        </tr>
                    </thead>
                    <tbody id="selectable">                           
                                <tr class="gradeU">
                                    <td align="left">First column info</td>
                                    <td align="left">second</td>
                                    <td>Third</td>
                                </tr>
                    </tbody>
                </table>

            </div>
        </div>

したがって、上記はデータテーブルです。ユーザーがボタンの上にカーソルを置いたときにのみ表示したいため、テーブル自体が非表示になっていることがわかります。ユーザーがボタンにカーソルを合わせると、次のコードが関数から呼び出されます。

   $(".datatable").show();

これは機能しますが、CSS が壊れます。データテーブルは非常に押しつぶされ、本来あるべき幅の約 4 分の 1 しかありません。呼び出される関数で幅を大きく設定しようとしましたが、うまくいきません。私はそれが次のコードと関係があることを知っています

     style="display:none;"

これを取り出すと、テーブルは正常に表示されますが、関数が呼び出されるまで非表示にする必要があります。

私は通常の $(element).style.visibilty を試しましたが、何も違いがないようです。テーブルは頑固に正しいサイズに移動することを拒否しています。どんな助けでも大歓迎です、そして前もって感謝します。

編集: 以下は、テーブルと TD の CSS です。

   table.display {
margin: 10px;
padding: 5px;
clear: both;
width: 98%;
overflow: auto;
/*    text-align: center;*/
height: auto;

    }

    table.display td {
        padding: 5px 5px;
     }

    table.display td.center {
        text-align: center;
    }

編集: テーブルの違いを示すために 2 つの画像をアップロードしました。

http://imageshack.us/photo/my-images/840/correecttable.png/

隠していない時のテーブルです。

http://imageshack.us/photo/my-images/822/incorrecttable.png/

これは、非表示にしてから jQuery を使用して表示したときのテーブルです。

4

3 に答える 3

5

.show()jQueryと関数がと（または）を.hide()切り替えるだけでCSSが壊れていますが、要素のプロパティのデフォルト値はであり、ではないため、次を使用して使用する代わりに、次のようにします。display: nonedisplay: blockdisplay: inlinedisplay<table>display: tabledisplay: block$(".datatable").show();$(".datatable").hide();

$(".datatable").css({'display': 'none'});  // to hide the table, here you can
                                           //  still use jQuery's .hide()
$(".datatable").css({'display': 'table'}); // to show the table
于 2012-09-21T09:50:23.777 に答える
1

ページが最初にロードされると、レイアウトされた css ファイルを使用してデータテーブルが形成されます。ただし、javascript を呼び出すと、データテーブルが再構築され、参照した CSS ファイルが無視されました。そのため、テキストのサイズに合わせてテーブルを自動的に縮小していました。これは、データテーブルの実際の作成で bAutoWidth = false を設定することで回避されました。

助けてくれたみんなに感謝します！

于 2012-09-21T13:52:38.423 に答える
1

メソッド .show() の jquery のドキュメントの一部を次に示します。

パラメーターなしの .show() メソッドは、要素を表示する最も簡単な方法です。

$('.target').show();

一致した要素は、アニメーションなしですぐに表示されます。これは、.css('display', 'block') を呼び出すのとほぼ同じです。

したがって、show は要素を display:block に設定します。これはおそらく、display:block でどのように見えるかです。

ここに .show() の完全な説明があります

おそらく、display:bock で見栄えがよくなるように、テーブルの css 属性を編集する必要があるだけです。

于 2012-09-21T09:35:51.200 に答える