重新绘制隐藏的HTML表格

Question

在页面加载中我有一个包含在隐藏div中的表格。该表只有页眉和页脚定义，但没有数据行。数据行使用Ajax动态加载。

一旦用户点击一个按钮，将显示包含该表（以及其他静态文本）的隐藏div。我的问题是，表格布局看起来不是很好，因为我使用宽度= 100％，在开始时表格被隐藏，并开始使用宽度为0的宽度。

理想情况下，我想知道是否有一种方法来强制重绘的表格，一旦div可见？

Answer 1

我假设你有类似下面的代码：

success: function (response) { 
    $('mytable').html(response).show(); 
} 

为什么不显示方法后，设置宽度，就像这样：

success: function (response) { 
    $('mytable').html(response).show(); 
    $('mytable').css('width', '100%'); 
} 

Answer 2

我的建议是在样式表CSS。有两种策略我使用：

1. 我使用firebug来获得正确的样式，然后将其放入样式表中。
2. 使用dumby数据放置表并将其与样式表一起设置，然后稍后移动它。

Answer 3

您可以clone()该元素，然后删除（）它，然后插入复制的克隆，并显示它。

您可以用clone(true, true)两个参数在再次插入时重新绑定所有事件。如果这不起作用，John Reisig本身还有另外一种方法：What is the most efficient way to deep clone an object in JavaScript?当clone（）不够用时，这对我有用。从第一个答案中使用jQuery元素作为“oldObject”。

例子：

// Deep copy 
var newObject = jQuery.extend(true, {}, $('#tableToClone')); 
$('#tableToClone').remove(); 
$('#divArroundTable').html(newObject);