Creating new table rows with IE

Tomasz Cenian · Mar 10, 2005

alex bazan napisaÅ‚(a):

<table id="a" border="1">
<tr>
<td><input type="button" onclick="newItem()" value="new item"></td>
</tr>
</table>

Any suggestions?

Always append new rows to <tbody> instead of <table>, i.e:

<table border="1">
<tbody id="a">
<tr>
<td><input type="button" onclick="newItem()" value="new item"></td>
</tr>
</tbody>
</table>

alex bazan · Mar 10, 2005

This piece of code (which works as a charm with Mozilla) ... does not
append new rows to the table in explorer, although the code is appended
to the innerHTML property.

<html>
<body>

<script>
function newItem () {

newTR=document.createElement('tr');
newTD=document.createElement('td');
newTD.innerHTML="this is a test";
newTD.width="100%";
newTR.appendChild(newTD);
document.getElementById("a").appendChild(newTR);
alert (document.getElementById("a").innerHTML);
}
</script>

<table id="a" border="1">
<tr>
<td><input type="button" onclick="newItem()" value="new item"></td>
</tr>
</table>

</body>
</html>

Any suggestions?

thanks in advance.
alex.

alex bazan · Mar 10, 2005

En/na alex bazan ha escrit:

This piece of code (which works as a charm with Mozilla) ... does not
append new rows to the table in explorer, although the code is appended
to the innerHTML property.

Problem solved. Changed

document.getElementById("a").appendChild(newTR);

TO:

document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR);

RobG · Mar 10, 2005

alex said:
En/na alex bazan ha escrit:

This piece of code (which works as a charm with Mozilla) ... does not
append new rows to the table in explorer, although the code is
appended to the innerHTML property.

Click to expand...

Problem solved. Changed

document.getElementById("a").appendChild(newTR);

Click to expand...

TO:

document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR);

You could also use the insertRow method of the table:

var x=document.getElementById('a').insertRow(newRowIndex);

where newRowIndex is where to put the new row - 0 is the top,
rows.length will be the last:

var tbl = document.getElementById('a');
var x = tbl.insertRow(tbl.rows.length);

You can then add cells using insertCell(newCellIndex):

var y = x.insertCell(0);
var z = x.insertCell(1);

will insert cells 'y' and 'z' into the new 'x' row.

Christopher Benson-Manica · Mar 10, 2005

Tomasz Cenian said:
Always append new rows to <tbody> instead of <table>, i.e:

Why is that? (it's a serious question

)

Martin Honnen · Mar 10, 2005

alex said:
En/na RobG ha escrit:

are this methods standard??

Yes, see the W3C DOM Level 2 HTML recommendation:
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>
<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016>
but note that IE has a slightly different implementation (parameter
being optional there):

<http://msdn.microsoft.com/library/d.../author/dhtml/reference/methods/insertrow.asp>

will they work on mozilla?

Yes, at least as posted above if the parameter is present.

alex bazan · Mar 10, 2005

En/na RobG ha escrit:

alex said:
alex said:

En/na alex bazan ha escrit:

This piece of code (which works as a charm with Mozilla) ... does not
append new rows to the table in explorer, although the code is
appended to the innerHTML property.

Click to expand...

Problem solved. Changed

document.getElementById("a").appendChild(newTR);

Click to expand...

TO:

document.getElementById("a").getElementsByTagName('tbody')[0].appendChild(newTR);

Click to expand...

You could also use the insertRow method of the table:

var x=document.getElementById('a').insertRow(newRowIndex);

where newRowIndex is where to put the new row - 0 is the top,
rows.length will be the last:

var tbl = document.getElementById('a');
var x = tbl.insertRow(tbl.rows.length);

You can then add cells using insertCell(newCellIndex):

var y = x.insertCell(0);
var z = x.insertCell(1);

will insert cells 'y' and 'z' into the new 'x' row.

are this methods standard??
will they work on mozilla?

RobG · Mar 10, 2005

Christopher said:
Why is that? (it's a serious question )

The tbody element is always present in a table, but the tags are
optional if there is no thead or tfoot.

"The TBODY start tag is always required except when the table
contains only one table body and no table head or foot
sections. The TBODY end tag may always be safely omitted."

<URL:http://www.w3.org/TR/html4/struct/tables.html#edef-TBODY>

Since almost no one codes them in their HTML, browsers insert
the tbody element when parsing the table.

Mozilla et al assume that when you append rows to a table
that you mean to the tbody, IE doesn't. So with IE you must add
rows to the tbody even if it isn't in your HTML.

Getting extra blank rows from appending HTML..?	2	Oct 24, 2023
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Bootstrap contact form not working	2	Feb 15, 2025
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Only one table shows up with the information	2	Mar 29, 2023
Javascript DOM	1	Mar 29, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 21, 2023

Creating new table rows with IE

Tomasz Cenian

alex bazan

alex bazan

RobG

Christopher Benson-Manica

Martin Honnen

alex bazan

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads