Weirdness when adding a row to a table

[jon]

I'm trying to add a row to a table and I think I'm not doing something
right. The sample code below contains a table with 4 single cell rows,
a button and a javascript function that the button runs.

In Netscape 7.0 and Firefox 0.8 the code below does add a row to the
table when the button is clicked but the alert() shows 4 instead of 5
like I'd expect.

Any idea why?

<form>
<table id="mytable" border="0" width="100%">
<tr>
<td width="100%">a</td>
</tr>
<tr>
<td width="100%">b</td>
</tr>
<tr>
<td width="100%">c</td>
</tr>
<tr>
<td width="100%">d</td>
</tr>
</table>
<p><input type="button" value="Test" name="B3" onClick="test()"></p>
</form>

<script language="javascript">

function test(){

var table = document.getElementById('mytable');

var row = document.createElement("TR");
var td = document.createElement("TD");
td.appendChild(document.createTextNode("new row"));
row.appendChild(td);
table.appendChild(row);

alert(table.rows.length);

}

</script>

[mscir]

jon wrote:

I'm trying to add a row to a table and I think I'm not doing something
right. The sample code below contains a table with 4 single cell rows,
a button and a javascript function that the button runs.

In Netscape 7.0 and Firefox 0.8 the code below does add a row to the
table when the button is clicked but the alert() shows 4 instead of 5
like I'd expect.

<snip>

The example code didn't add a new row in my IE6. If you add the alert to
see the # of rows at the end of the add/delete row functions on this
page it works. The page claims thir code Browser Support is:

- works in Internet Explorer 6, Netscape 6, and Mozilla 1.6.
- will not work in Netscape 4 and below or IE 5 and below.

http://www.mredkj.com/tutorials/tableaddrow.html

Mike

[Michael Winter]

On Tue, 20 Apr 2004 10:47:14 -0400, jon <noemail@invalidisp$$$.com> wrote:

I'm trying to add a row to a table and I think I'm not doing something
right. The sample code below contains a table with 4 single cell rows,
a button and a javascript function that the button runs.

In Netscape 7.0 and Firefox 0.8 the code below does add a row to the
table when the button is clicked but the alert() shows 4 instead of 5
like I'd expect.

Any idea why?
Probably because you're not using the normal (correct?) method. Tables,
and table sections (tbody, thead, tfoot), have insertRow() and deleteRow()
methods. Table rows also have their own specific methods: insertCell() and
deleteCell(). You shouldn't use document.createElement() to produce them.

[snipped mark-up]
<script language="javascript">
This should read

<script type="text/javascript">

The type attribute is required and the language attribute is deprecated
and should not be used.
function test(){

var table = document.getElementById('mytable');

var row = document.createElement("TR");
var td = document.createElement("TD");
td.appendChild(document.createTextNode("new row"));
row.appendChild(td);
table.appendChild(row);

alert(table.rows.length);

}

In addition to using the methods I mentioned above, you should check that
support exists for the methods and properties you intend to use,
especially with regard to DOM methods. I'd write the above

function test() {
var table, row, cell, text;

if( document.getElementById && document.createTextNode ) {
if(( table = document.getElementById( 'mytable' )) &&
table.insertRow )
{
/* An index of -1 for insertRow() and
insertCell() appends the new element. */
if(( row = table.insertRow( -1 )) && row.insertCell ) {
if(( cell = row.insertCell( -1 )) && cell.appendChild &&
( text = document.createTextNode( 'new row' )))
{
cell.appendChild( text );
}
}
}
}
}

Read

<URL:http://jibbering.com/faq/#FAQ4_26>

That entry itself mainly refers why it's bad to use browser detection.
However, it's links describe feature detection.

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Lasse Reichstein Nielsen]

Michael Winter <M.******@blueyonder.co.invalid> writes:

Probably because you're not using the normal (correct?)
method. Tables, and table sections (tbody, thead, tfoot), have
insertRow() and deleteRow() methods. Table rows also have their own
specific methods: insertCell() and deleteCell(). You shouldn't use
document.createElement() to produce them.

There is nothing wrong with using createElement. You can do that
without problem. However, as you pointed out, tables have rowgroup
elements, and you have to add the rows to those, not to the table
element itself.

Change
table.appendChild(row);
to
table.getElementsByTagName("tbody").item(0).append Child(row);
and it works for this example.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

On Tue, 20 Apr 2004 22:08:24 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

Michael Winter <M.******@blueyonder.co.invalid> writes:

Probably because you're not using the normal (correct?)
method. Tables, and table sections (tbody, thead, tfoot), have
insertRow() and deleteRow() methods. Table rows also have their own
specific methods: insertCell() and deleteCell(). You shouldn't use
document.createElement() to produce them.

There is nothing wrong with using createElement. You can do that
without problem. However, as you pointed out, tables have rowgroup
elements, and you have to add the rows to those, not to the table
element itself.

Change
table.appendChild(row);
to
table.getElementsByTagName("tbody").item(0).append Child(row);
and it works for this example.

I wasn't sure that that was viable, but in any case, isn't the use of
insertRow() and insertCell() better?

Are there any specific (client-side) fallback strategies that should be
used, other than innerHTML (if early IE versions are of concern)? For
instance, are there any known combinations that aren't supported by some
browsers?

I suppose that last question could be valid for most DOM methods. For
example, Opera doesn't support HTMLOptionCollection.item() or .namedItem()
[1], and IE doesn't support HTMLOptionCollection[ <name> ], but it does
support HTMLOptionCollection.namedItem( <name> ).

Mike
[1] Though it seems to support them with other collections, as your
example shows.

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)

[Gianna]

> > table.appendChild(row);

to
table.getElementsByTagName("tbody").item(0).append Child(row);
and it works for this example.

I wasn't sure that that was viable, but in any case, isn't the use of
insertRow() and insertCell() better?

Not for large tables in IE. The table methods are extremely slow. See
http://www.quirksmode.org/dom/innerhtml.html for a comparison.
Gianna

[Lasse Reichstein Nielsen]

Michael Winter <M.******@blueyonder.co.invalid> writes:

I wasn't sure that that was viable, but in any case, isn't the use of
insertRow() and insertCell() better?
That would require a definition of "better" :)

There are no preferences in the W3C DOM specification, so one isn't
officialy better than the other.

Whether one is more eifficient than the other depends entirely on the
implementation. As far as I *remember* (i.e., I am likely to be
wrong), the specific table methods are slower than the general DOM
methods in IE.
Are there any specific (client-side) fallback strategies that should
be used, other than innerHTML (if early IE versions are of concern)?
Actually, innerHTML is not a good fallback, since in IE it is read-only
for most table elements (anything except TR really).
--quote--
The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE,
TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.
---
For instance, are there any known combinations that aren't supported
by some browsers?

I can't answer that though :)

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

On Wed, 21 Apr 2004 20:00:09 +0200, Lasse Reichstein Nielsen
<lr*@hotpop.com> wrote:

Michael Winter <M.******@blueyonder.co.invalid> writes:

I wasn't sure that that was viable, but in any case, isn't the use of
insertRow() and insertCell() better?
That would require a definition of "better" :)

Of course. :) I was being intentionally vague, but I suppose "better"
would include quicker, better support, easier to use, makes code intent
clear, and anything else you might think of.
There are no preferences in the W3C DOM specification, so one isn't
officialy better than the other.

Whether one is more eifficient than the other depends entirely on the
implementation. As far as I *remember* (i.e., I am likely to be
wrong), the specific table methods are slower than the general DOM
methods in IE.
You'd be correct, as Gianna's post indicated. Thanks Gianna, I forgot
about that page.

I find the results somewhat surprising, though. I would expect at least an
approximately equal performance. At its simplest, surely the browser would
just perform the same sequence you might with createElement()? For it to
perform almost four times slower is ridiculous. As the browser should be
able to optimise execution, I'd expect it to perform the fastest out of
all the DOM methods in every browser. I wonder why it doesn't.

Are there any specific (client-side) fallback strategies that should
be used, other than innerHTML (if early IE versions are of concern)?

Actually, innerHTML is not a good fallback, since in IE it is read-only
for most table elements (anything except TR really).

Don't you mean TD?
--quote--
The property is read/write for all objects except the following, for
which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE,
TBODY, TFOOT, THEAD, TITLE, TR. The property has no default value.
---

I didn't know about that. Shows how much I usually care about proprietary
Microsoft features. :)

I suppose that leaves either using the DOM, or writing the entire table
with innerHTML, as the only options.

For instance, are there any known combinations that aren't supported
by some browsers?

I can't answer that though :)

Didn't really *expect* you to, but I could have been lucky and you did.
The collection irregularities I mentioned are interesting though. By the
way, I did include Mozilla 1.8a in the test, but it had no issues.

Thanks for your comments,
Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)