Forum Moderators: open
Depending on the content, sometimes there may be quite a few rows... I've noticed its very slow if there are > 50 rows and I believe this is probably due to the fact that the browser never really knows when I'm done inserting these rows (at what point does it decide : "Ok, their done updating this table, now let me re-render it"). I suspect its starting this re-render process several times during the time I'm inserting rows.
What I would LIKE to do is :
1) tell the browser (or a portion of the Dom tree) to: "Ignore updates for a bit, I'm going to be inserting a bunch of nodes, so you might as well wait until I'm done...."
2) insert all my nodes (rows in a table in this case)
3) tell the browser (or Dom tree): "Ok, you can re-render now, I'm done with my modifications to the Dom tree".
Anyone got a clue on how to do this...?
BTW - I've tried just building up a big string and saying
someDomElement.innerHTML = myHtmlSnippit;
But this causes some other timing issues for me.
------------------------------------
var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";
//--- keep IE happy...
var tempParent = document.createElement("table");
tempParent.appendChild(newTableBody);
for (...)
{
var documentTr = newTableBody.insertRow(i);
//--- <snip> populate each row...
}
//--- replace the old tbody with the new one...
var oldTableBody = document.getElementById("MyTBodyId");
var domTable = oldTableBody.parentNode;
domTable.replaceChild(newTableBody, oldTableBody);
------------------------------------
This works fine...
Anyway, about the time I got this all working, I came across the following example from Danny Goodman (the Orielly DHTML guy).
[dannyg.com...]
He says in his 4/2003 update not to use the specialized table inserts (use the normal dom manipulation stuff instead). He also suggested using the DocumentFragment facility. I revamped mine to do follow this, so now it looks like :
------------------------------------
var bodyElem =document.getElementById("MyTBodyId");
//--- clear the old table body...
clearChildNodes(bodyElem);
var workingFragment = document.createDocumentFragment();
for (...)
{
var domTr = document.createElement("tr");
workingFragment.appendChild(domTr);
//--- insert td elements, etc.
}
//--- now insert back into tbody...
bodyElem.appendChild(workingFragment);
------------------------------------
I can tell a speed difference (thought its still not blazing fast for > 100 rows in IE). Interestingly, performance in Mozilla Firebird .6 is MUCH faster (about 2-3 times faster than IE6).
But you have given me some new areas to study, especially the documentFragment approach.
IE6 didn't like me trying to insert rows into a
dom element of type "tbody" unless that element had a
parent "table"
It's not just the IE browser, but the W3C spec itself that says tbody MUST be inside a table:
If you use the thead, tfoot and tbody elements,
you must use every element, but you can leave them
blank.They should appear in this order:
<thead>, <tfoot> and <tbody>, so that browsers can
render the foot before receiving all the data.You must use these tags within the table element.
W3Schools reference [w3schools.com]
this is modified, but only for test
<body></body>
<script>
var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId"; var documentTr = newTableBody.appendChild(document.createElement("TR"));
documentTr.appendChild(document.createElement("TD")).appendChild(document.createTextNode("..."));
var tempParent = document.createElement("table");
tempParent.appendChild(newTableBody);
tempParent.border = "1";
document.body.appendChild(tempParent)
</script>
