How to insert table row in Mac IE 5.2+

[Cylix]

After search in the web,
I found that, insertRow, insertCell, is a bug of Mac IE,
Moreover, <table>, <tbody> seems doesn't support innerHTML,
What is the solution to show dynamic table in Mac IE?

Thank you

 

[RobG]

After search in the web,
I found that, insertRow, insertCell, is a bug of Mac IE,
Moreover, <table>, <tbody> seems doesn't support innerHTML,
What is the solution to show dynamic table in Mac IE?

You can use DOM core methods - use createElement and append it to a
tbody element. The first button below uses getElementById to get a
reference to a tbody element, the second uses a reference to a tr then
uses parentNode to get the tbody.

You don't have to include the tags for a tbody, one will be added anyway
(it's a mandatory element for a table but the tags are optional).


<table border="1">
<tbody id="tbodyA">
<tr id="rowA"><td>fred</td></tr>
</tbody>
</table>

<input type="button" value="Add row 1" onclick="
var b = document.getElementById('tbodyA');
var r = document.createElement('tr');
var c = document.createElement('td');
c.appendChild(document.createTextNode('new Row'));
r.appendChild(c);
b.appendChild(r);
">

<input type="button" value="Add row 2" onclick="
var b = document.getElementById('rowA');
var r = document.createElement('tr');
var c = document.createElement('td');
c.appendChild(document.createTextNode('new Row'));
r.appendChild(c);
b.parentNode.appendChild(r);
">

 

[Cylix]

Thank you so much.
By your example,
all the row is append to the end of the table,
I have tried to use insert before, but I found that they get the same
result.

How can I insert a row at the top of the table?

Thank you!

 

[RobG]

Thank you so much.
By your example,
all the row is append to the end of the table,
I have tried to use insert before, but I found that they get the same
result.

How can I insert a row at the top of the table?

Use insertBefore with a reference to the first row (it works in other
browsers too):

<script type="text/javascript">

function addTopRow(id)
{
var tableA = document.getElementById(id);
var firstRow = tableA.rows[0];
oTR = document.createElement('tr');
oTD = document.createElement('td');
oTD.appendChild(document.createTextNode('new first row'));
oTR.appendChild(oTD);

// Get reference to tbody using firstRow.parentNode
firstRow.parentNode.insertBefore(oTR, firstRow);
}

</script>


<table id="tableA">
<tr><td>first row</td></tr>
</table>

<input type="button" value="Add top row"
onclick="addTopRow('tableA');">