Table appendChild/removeChild crashes IE6

[sfeher]

Hi All,

I'm creating a table using createElement / appendChild and everything
works great.
Ussualy I have no more than 20 rows and they contain less that 5
columns.

Where my code starts to break (IE6 only, FF works great) is when I
quickly clear(removeChild) the table and insert new rows. My problem is
that I am getting a IE6 crash and the last log message shows a
different location most of the time.

Trying to use deleteRow, insertRow is no different and my understanding
is that innerHTML is readonly with TOM.

So what can I do? Any ideas?

Regards,
Sebastian

 

[Jeremy]

Hi All,

I'm creating a table using createElement / appendChild and everything
works great.
Ussualy I have no more than 20 rows and they contain less that 5
columns.

Where my code starts to break (IE6 only, FF works great) is when I
quickly clear(removeChild) the table and insert new rows. My problem is
that I am getting a IE6 crash and the last log message shows a
different location most of the time.

Trying to use deleteRow, insertRow is no different and my understanding
is that innerHTML is readonly with TOM.

So what can I do? Any ideas?

Regards,
Sebastian

Are you taking into account the implicit TBODY element?

HTML pages served as HTML always have an implicit TBODY element.
XHTML pages served as XHTML do not.
XHTML pages served as HTML may or may not.

Step carefully

Jeremy

 

[RobG]

Hi All,

I'm creating a table using createElement / appendChild and everything
works great.
Ussualy I have no more than 20 rows and they contain less that 5
columns.

Where my code starts to break (IE6 only, FF works great) is when I
quickly clear(removeChild) the table and insert new rows. My problem is
that I am getting a IE6 crash and the last log message shows a
different location most of the time.

Trying to use deleteRow, insertRow is no different and my understanding
is that innerHTML is readonly with TOM.

So what can I do? Any ideas?

Difficult to tell without code. In IE, when using
createElement/appendChild for table rows, you must add the rows to a
table section element (tbody, thead, tfoot). Other browsers allow you
to append created rows to the table and then add them to the tbody.

If you have a reference to an existing row, you can do something like:

var oTR = document.createElement('tr');
rowRef.parentNode.appendChild(oTR);

insertRow is normally pretty reliable since it is DOM 1, remember to
include an index value for where to put the row (IE allows you to omit
it):

var oTR = tableRef.insertRow(-1);


'-1' will insert the row as the last in the table. The tableSection
interface supports insertRow too, so you can get a reference to a table
section element and use insertRow with that:

var oTR = tBodyRef.insertRow(-1);


The index must be in the range -1 to tBodyRef.rows.length. I've
created thousands of rows using insertRow in IE and never had any
problem with it.

 

[sfeher]

Thanks for your responses Rob & Jeremy.

As I was trying to get a cleaner version of the
code(http://webfx.eae.net/dhtml/collist/columnlist.html) that I could
post I found the bug:

....
this._eBodyCols = this._eBodyTable.tBodies[0].rows[0].cells;
....

and then when remove row would remove the first row I'll be left with a
dangling reference.

The crash was happening when accessing the non-null
this._eBodyCols.length

So indeed, the bug was not in the TOM but it's a crash nonetheless..

Regards,
Sebastian