By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,506 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

How to insert table row in Mac IE 5.2+

P: n/a
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

Jun 23 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Cylix wrote:
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);
">

--
Rob
Jun 23 '06 #2

P: n/a
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!

Jun 26 '06 #3

P: n/a
Cylix wrote:
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');">

--
Rob
Jun 26 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.