Question

我有一个用Javascript动态生成的数据表。每隔几分钟，页面就会通过触发Ajax请求，从服务器获取数据并替换表中的数据来刷新数据。这是非常标准的，表格最终看起来像这样：

如果我通过清空表并逐渐添加行来生成数据，这可以正常工作。但是，此表可能有数千行，并且生成浏览器提供的表可能需要很长时间用户“此脚本执行时间太长”错误。所以我通过将表生成分成块并使用setInterval一次做一些来解决这个问题。

这很好用，但因为表可能需要一段时间才能完全生成，所以我试着变聪明并做一些伪双缓冲。我有一个第二个表，其display设置为none以隐藏它，当我重新生成表时，我一次将这些行添加到隐藏表中。这样，在表格重新生成完成之前，用户就可以看到现有数据，此时我们只需将它们全部替换为新内容。

我正在使用以下代码行替换

$("#loading_area tbody").children().appendTo( $("#unplanned tbody").empty() );

这适用于Firefox，Safari和Google Chrome。但在IE上，我得到以下内容：

这些行实际上不是空白的 - 如果我滚动得足够的话，内容就在那里：

似乎第一列的宽度超过55,000像素！这里有一个非常奇怪的部分：一旦我改变了关于桌子风格的内容，内容就会重新正确显示。因此，如果我将字体颜色更改为绿色，IE将立即正确地重新渲染表格。

但我无法直接进行更改。所以，如果我说

$("#unplanned").css("color", "green");

然后它没有正确地重新渲染;颜色变化，但第一列保持55,000像素宽。但是，如果我直接对样式表进行更改

document.styleSheets[1].rules[3].style.color = "green";

然后它正确地重新呈现表格。

所以我最后通过进行随机样式更改来修复此问题，每次我完成布置表格时，切换1px和0px之间的展开/折叠按钮的边距，这很有用。

我的问题是，当我尝试打印页面时，这些行是空白的，因为页面内容不正确地呈现给打印机。

所以我会尝试更多的技巧，可能只是切换显示哪个表并交换他们的id或其他什么使这个工作。我的问题是，这里发生了什么？这似乎是IE中的一个错误;我正在使用IE8，但同样的事情发生在IE6和IE7上。我想避免将来陷入这个坑，但我不确定是什么导致这个，所以我不确定我应该避免什么。任何人都可以对此发出任何消息都会非常感激。

编辑：交换显示哪个表会导致渲染问题在浏览器中消失而不需要样式表黑客攻击，但打印问题仍然存在。实际上，即使直接生成表而没有显示/隐藏或元素移动技巧，打印问题也存在。所以我很困惑，不知道我能做些什么来解决这个问题。如果我无法解决这个问题，我可能不得不制作一个单独的静态页面。

Answer 1

没有测试用例，不能肯定地说，但总的来说：

确保您使用的是table-layout: fixed。 IE很难猜测auto列宽，特别是当涉及到colspans时。当行数很多时，猜测宽度也很慢。通过使用固定的表格布局为每列设置明确的大小，从IE中取出它。
避免将行附加到大表中。当你说children().appendTo() jQuery仍然在做每个追加一个时，很快就会非常缓慢。您可以做的最好的事情是加速表操作，使用表的父元素上的innerHTML一次性设置整个批次。当然，如果要插入数据（属性值和内容），准备HTML字符串会很烦人，因为它必须进行HTML转义。解决方法是使用占位符值一次写入所有行，然后在第二次传递中通过在Text节点上设置.data来填充实际数据，依此类推。除非您正在使用，否则您需要在此步骤中重新附加您在这些按钮上添加的任何事件处理程序。
我认为通过使用innerHTML编写行，你应该能够加速它以摆脱基于超时的部分更新（这似乎有令人讨厌的潜在竞争条件）。当然，基于DOM的替代方案是仅更新已更改的行。当您使用固定布局时，由于宽度不依赖于内容，因此您可以将表格分成几个表格。它们看起来像是一个表，但是你可以单独处理每个表，或者一次编写它的innerHTML，或者在没有DOM性能死亡的情况下附加行，而不会在单个表中有数千行。 / p>

Answer 2

您的主表中只能有两个tbody个元素。一个用于显示，另一个用于缓冲。这样你就可以跳过附加另一个tbody并从缓冲区中删除display.none来显示它。我的猜测是它可能会更快一些，也许可以解决IE中的故障。

在我学习的表格中显示或隐藏元素的另一种方法（技巧？）是在行上设置position到absolute或在tbody设置隐藏它，而不是使用display。这仍然隐藏它，但没有改变（搞乱）表格的布局。您可以尝试使用它来隐藏缓冲区。

通常，表格是最古怪的元素之一，即使在现代浏览器中也是如此。做任何与他们同行的事情通常会导致这些小问题，祝你好运。

Answer 3

桌子上有宽度设置吗？在我看来，如果你在隐藏它时生成表，它可能不会像当前浏览器窗口宽度一样，它通常用于设置表的宽度，因此它会回落到最大值。 / p>

IE不正确地呈现动态内容，直到更改样式表

3 个答案: