remove/appendChild or redefining attributes?

I'm making an application, which creates instances of stocks received from db. Because the db isn't updating frequently, I'll use client-side scripting for filtering and sorting values, rather than making a new query to db every time.

The application consist of following parts :
- table(header,footer,body)
--rows (amount depending of length of stocks array) in body
---cells containing data of a single stock

- stock controls
--constructor for stocks object into stock array

- sorting controls
--sort criteria (Stock name, stock code etc.) and boolean ascending/descending

First I made stock table by creating new instances of stocks and table every time table was sorted. This worked pretty fast, but caused IE to crash (surpise) after frequent updating.

Secondly, I made a stock table by re-sorting values in stock array and redefining values in cells. This turned out to be much slower way, yet it didn't crash IE.

I know Moz would be better for this (of course it is). However, our Intranet is relying mainly for IE proprietary controls and Mozilla can't be used. My workstations' IE is crashing occasionally on normal web pages, so there are also other problems causing it to crash.

My question is, which is the most reliable and fastest way to re-create table and append objects and their values into it? Deleting the table and re-creating it or just changing the values? Or are there faster ways for doing this I'm not aware of?

Haven't you seen Vladdy's Tables? (http://www.vladdy.net/WebDesign/DOM_Tables.html)

Originally posted by beetle
Haven't you seen Vladdy's Tables? (http://www.vladdy.net/WebDesign/DOM_Tables.html)

No I haven't..until now. Very nice, but this is very much like I'm doing them - excluding few exceptions in methods. I use obj.insertXXXX(); instead of obj = document.createElement(XXXX);.

It seems to construct the tables correctly very fast (blue bar indicates loading on right side in status bar), but then system halts just before displaying the tables. Like there is something inapproriate.

This is how I append stock array in table's body. Method is called :
oTbody.appendArray(aStocks,<% =Date %>);

function appendArray(aName, dtDate)
{
this.removeChild(this.childNodes[0]);

var oTDCode = document.createElement('td');
var oTDName = document.createElement('td');
var oAnchor = document.createElement('a');

oAnchor.href = "";
oAnchor.title = "";
oAnchor.appendChild(document.createTextNode(""));
oTDCode.appendChild(oAnchor);

for (var iI=0;iI<aName.length;iI++)
{
var oTempCode = oTDCode.cloneNode(true);
var oTempName = oTDCode.cloneNode(true);

oTempCode.childNodes[0].href = "arvopaperit.asp?v="+ aName[iI].sCode +"&d="+ dtDate;
oTempCode.childNodes[0].title = "Arvopaperi : "+ aName[iI].sName;
oTempCode.childNodes[0].innerHTML = aName[iI].sCode;

oTempName.innerHTML = aName[iI].sName;

this.childNodes[iI].appendChild(oTempCode);
this.childNodes[iI].appendChild(oTempName);
}
}

I don't know if I'm of any real help now, but I usually handle <table> manipulations by the specialized functions for this element, like insertCell() for inserting a new cell. Until now, that has worked very reliably, but it wasn't used on very big tables (such as 20 cells/50 rows).

insertCell reference:
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/insertcell.asp

However, I recall that there were recently some discussions about IE's shortcomings in handling large tables with DOM methods on the wdf-dom mailinglist. It's archive can be found here (http://groups.yahoo.com/group/wdf-dom/), perhaps you find the root of your problem described there.

hth

I finally succeeded in creating methods &amp; constructors which works without problems by actually making UML Class Diagram. I ran the tests :

New query to database by refreshing : ~1.35 seconds
Using my model : ~0.67 seconds

WOW! Now everybody saves about 0.7 seconds and are able to sort stock results with the criteria they want. And I have a documentation about this. Oh boy, what a progress.

Hi. I'm having a similiar issue with IE on the Mac crashing on DOM code. Can you please tell me what was wrong with your script that caused it to crash and what you changed?