0

编辑：已解决。当页面最初加载时，数据表是使用布局的 css 文件形成的。但是，当它调用 javscript 时，它正在重建数据表并忽略我引用的任何 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。数据表变得非常挤压，只有大约四分之一的宽度。我尝试在调用的函数中将宽度设置得更大，但没有运气。我知道它与以下代码有关

     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

CSS 被破坏了，因为 jQuery.show()和函数只是在and (or ).hide()之间切换，但是element的属性的默认值是and not ，所以不要使用and使用以下内容：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

这是方法.show（）的jquery文档的一部分：

没有参数，.show() 方法是显示元素的最简单方法：

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

匹配的元素将立即显示，没有动画。这大致相当于调用 .css('display', 'block')

所以 show 将你的元素设置为 display:block，这可能就是它在 display:block 中的样子。

这是.show() 的完整描述

可能您只需要编辑表格的 css 属性，使其在 display:bock 上看起来不错。

于 2012-09-21T09:35:51.200 回答
1

当页面最初加载时，数据表是使用布局的 css 文件形成的。但是，当它调用 javscript 时，它正在重建数据表并忽略我引用的任何 CSS 文件。因此，它会自动缩小表格以匹配文本的大小。这可以通过在数据表的实际创建中设置 bAutoWidth = false 来避免。

感谢所有帮助过的人！

于 2012-09-21T13:52:38.423 回答