Appending to table cells

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

SharkD - 26 Aug 2008 03:14 GMT

The following page works in Firefox but not in IE7:

http://www.geocities.com/mikehorvath.geo/html_table_cell_append_test.html

I was wondering if someone might take a look at it and offer some suggestions.

Basically, I am replacing a table cell with another table and moving the
original cell into the new table. In IE7 the entire table just disappears.
It works properly in Firefox.

Reply to this Message

Old Pedant - 26 Aug 2008 03:31 GMT

> The following page works in Firefox but not in IE7:
>
[quoted text clipped - 3 lines]
> original cell into the new table. In IE7 the entire table just disappears.
> It works properly in Firefox.

Well, appears to be an MSIE bug. For what it's worth, it acts the same with
in MSIE 6.

I modified your code to add some debugging and to make things easier to see,
and it's pretty clear that it's creating the document "tree" correctly:

<html>
<head>
<style>
table { border: solid black 1px; }
th { background-color: pink; }
</style>

<script>
function dothis()
{
    var cell = document.getElementById('th1')
    var newTable = document.createElement('table');
    var newRow = document.createElement('tr');
    var newCell1 = document.createElement('th');
    var newCell2 = document.createElement('th');
    var newText = document.createTextNode('trumpet')
    while (cell.hasChildNodes())
        newCell1.appendChild(cell.removeChild(cell.firstChild));
//    newCell2.innerHTML = 'trumpet'

    newCell2.appendChild(newText);
    newRow.appendChild(newCell1);
    newRow.appendChild(newCell2);
    newTable.appendChild(newRow);
    cell.appendChild(newTable);
document.getElementById("show").innerText =
document.getElementById("tbl").innerHTML;
}
</script>
</head>

<body>

<input type="button" value="click" onclick="dothis()"/>
<table id="tbl">
<tr>
<th id="th1">header</th>
</tr>
</table>
<hr>
<div id="show"></div>
</body>
</html>

Still...there are a few funky things in your code, so I'm gonna play with it
a bit more.

Reply to this Message

Old Pedant - 26 Aug 2008 03:39 GMT

> The following page works in Firefox but not in IE7:
>
> http://www.geocities.com/mikehorvath.geo/html_table_cell_append_test.html

Oh! I remember now! MSIE doesn't allow you to create table elements using
createElement! You have to use insertRow and insertCell!

Thus:

<html>
<head>
<style>
table { border: solid black 1px; }
th { background-color: pink; }
</style>

<script>
function dothis()
{
    var cell = document.getElementById('th1');

    var newTable = document.createElement('table');
    var newRow = newTable.insertRow( );
var newCell1 = newRow.insertCell( );
var newCell2 = newRow.insertCell( );
    var newText = document.createTextNode('trumpet')
    while (cell.hasChildNodes())
        newCell1.appendChild(cell.removeChild(cell.firstChild));

    newCell2.appendChild(newText);
    cell.appendChild(newTable);
document.getElementById("show").innerText =
document.getElementById("tbl").innerHTML;
}
</script>
</head>

<body>

<input type="button" value="click" onclick="dothis()"/>
<table id="tbl">
<tr>
<th id="th1">header</th>
</tr>
</table>
<hr>
<div id="show"></div>
</body>
</html>

Of course, *THAT* code bombs out on Firefox. Isn't browser compatibility fun?

Reply to this Message

mikh2161@gmail.com - 26 Aug 2008 03:57 GMT

Thanks for the reply!

Passing the argument, "-1", to "insertRow" and "insertCell" makes it
work in Firefox. I wonder if it works in other browsers...

-Mike

PS: Microsoft's web interface to this group sucks! Luckily I found the
one by Google.

Reply to this Message

SharkD - 26 Aug 2008 04:00 GMT

On Aug 25, 10:57 pm, mikh2...@gmail.com wrote:

> Thanks for the reply!
>
[quoted text clipped - 5 lines]
> PS: Microsoft's web interface to this group sucks! Luckily I found the
> one by Google.

Test message.

Reply to this Message

SharkD - 26 Aug 2008 04:21 GMT

On Aug 25, 10:57 pm, mikh2...@gmail.com wrote:

> Thanks for the reply!
>
[quoted text clipped - 5 lines]
> PS: Microsoft's web interface to this group sucks! Luckily I found the
> one by Google.

I uploaded a newer version that works in both browsers. I'm going to
test it using browsershots.org.

-Mike

Reply to this Message

SharkD - 26 Aug 2008 04:34 GMT

> On Aug 25, 10:57 pm, mikh2...@gmail.com wrote:
>
[quoted text clipped - 12 lines]
>
> -Mike

Seems to work in all browsers except IE 4 and Dillo (whatever that is).

Reply to this Message

SharkD - 26 Aug 2008 04:56 GMT

> On Aug 25, 10:57 pm, mikh2...@gmail.com wrote:
>
[quoted text clipped - 12 lines]
>
> -Mike

I just noticed that the insertCell method only inserts TD elements,
not TH. I'd rather not have to mess with the style properties, as
that's a great big hassle.

-Mike

Reply to this Message

Old Pedant - 26 Aug 2008 21:29 GMT

> > > Passing the argument, "-1", to "insertRow" and "insertCell" makes it
> > > work in Firefox. I wonder if it works in other browsers...

DOH on me! I remember, now, discovering that a long time ago. Tch. Going
senile.

> I just noticed that the insertCell method only inserts TD elements,
> not TH. I'd rather not have to mess with the style properties, as
> that's a great big hassle.

Can't you just clone your TH properties into a single style class and then
just apply that class to the inserted cell??
newcell = newrow.insertCell(-1);
newcell.className = "StyleThatLooksLikeTH";
??

Reply to this Message

dhtml - 26 Aug 2008 06:08 GMT

>> The following page works in Firefox but not in IE7:
>>
>> http://www.geocities.com/mikehorvath.geo/html_table_cell_append_test.html
>
> Oh! I remember now! MSIE doesn't allow you to create table elements using
> createElement! You have to use insertRow and insertCell!

IE needs a tbody.

Garrett

Reply to this Message

SharkD - 26 Aug 2008 06:17 GMT

> >> The following page works in Firefox but not in IE7:
>
[quoted text clipped - 6 lines]
>
> Garrett

Yep. Appending the row to the tbody and the tbody to the table works
in IE. Thanks!

-Mike

Reply to this Message

SharkD - 26 Aug 2008 06:32 GMT

> Yep. Appending the row to the tbody and the tbody to the table works
> in IE. Thanks!
>
> -Mike

Compatibility is not as great, though. More of the results from
browsershots.org are showing up with errors (though it works in most
of them).

-Mike

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / MS JScript / August 2008

Appending to table cells