IE does not display dynamic content properly until a style sheet change is modified

Question

I have a data table that is dynamically generated using Javascript. Every few minutes, the page refreshes the data by calling an Ajax request, returning data from the server, and replacing the data in the table. This is pretty standard, and the table looks like this:

This works fine if I generate data by omitting the table and gradually adding rows back. However, this table can have thousands of rows, and it can take so long to create the table that the browser gives the user "This script takes too long to execute" errors. So I fixed this by breaking the table generation into pieces and doing a bit at a time using setInterval.

This worked fine, but since the table may take some time to be fully generated, I tried to be smart and do some pseudo-duplication. I have a second table that has displaya value set noneto hide it, and when I create the table again, I add rows to the hidden table little by little. Thus, the existing data is visible to the user until the regeneration of the table is completed, and at that moment we simply replace it with the new contents immediately.

I am doing my replacement with the following line of code

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

This works great in Firefox, Safari, and Google Chrome. But in IE, I get the following:

These lines are actually not empty - the contents are there if I scroll horizontally enough:

, 55 000 ! : , . , , IE .

. ,

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

; , 55 000 .

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

.

, , , Expand/Collapse 1px 0px, , , , .

, , .

, , , , id -, . : ? IE; IE8, IE6 IE7. , , , , . , , .

: , . , , - / . , , . , , , .

Answer 1

, :

• , table-layout: fixed. IE auto, colspans. , . IE, .

• . children().appendTo(), jQuery , . , , , - , innerHTML . , HTML , ( ), HTML. , -, .data . , , live.

• , , innerHTML, , , - (, , ). , , DOM, , . , , . , , innerHTML , DOM, - , .

Answer 2

tbody . , . , tbody display.none , . , , , ​​IE.

(?) , , position absolute tbody, , display. , () . , .

, , . - , .

Answer 3

Do you have the width set on the table? It occurs to me that if you create a table while it is hidden, it may not collect things like the current width of the browser window, which it usually uses to set the width of the table, so it goes back to the maximum.