can't dynamically generate table in Internet explorer

aric.bills · Oct 13, 2006

Hello all,

I'm a novice Javascript programmer, and I'm having browser
compatability issues regarding dynamic generation of tables. The
following content generates "hello" in Firefox 1.5, but just a blank
page in IE 6. Can anybody tell me what I should change to make IE
happy? Even better, is there any kind of tutorial out there on
dynamically generating tables?

Many thanks,
Aric

<html>
<head>
<title> Test </title>
<script language="javascript">

</script>
</head>
<body>
<div ID="mydiv">
</div>
</body>
</html>

RobG · Oct 13, 2006

Hello all,

I'm a novice Javascript programmer, and I'm having browser
compatability issues regarding dynamic generation of tables. The
following content generates "hello" in Firefox 1.5, but just a blank
page in IE 6. Can anybody tell me what I should change to make IE
happy?

Every HTML table must have a tbody element, though the tags in the HTML
source are optional. When creating a table using either HTML or
script, the tbody element is automatically added by the browser.

When using DOM Core methods createElement and appendChild to add rows
to a table, most browsers will allow you to append the row to the table
object, even though strictly speaking it should be appended as a child
of the tbody. IE doesn't do that, you have to add it to the tbody.

The simple solution is to use the DOM HTML methods, insertRow and
insertCell[1]. Here IE is also a little different in that if you don't
supply a parameter, it will add the row or cell as the last in the
collection, most other browsers will barf. If you want the new row as
the last row, just use insertRow(-1).

Even better, is there any kind of tutorial out there on
dynamically generating tables?

There are some, but I wouldn't recommend them. The principles are
fairly simple: create a tables using createElement, then add rows using
the table's insertRow() method and cells using the row's insertCell()
method. Remove rows using table.deleteRow().

If you want to create table sections, you can do that too: they have
the same methods as tables do for inserting and deleting rows.

The following link is to the Gecko DOM Table Interface page. It's not
complete, though the examples are better than some - it also has links
to the appropriate W3C specifications.

<URL:
http://developer.mozilla.org/en/docs/DOM:table#HTML_Table_Element_Interface

Many thanks,
Aric

<html>
<head>
<title> Test </title>
<script language="javascript">

The language attribute is deprecated, type is required:

<!--

Do not use HTML comment delimiters inside script elements, they are
completely unnecessary and often cause problems.

window.onload = init;

function init() {

var el = document.createElement('table');
var row = document.createElement('tr');

var row = el.insertRow(-1);

var col = document.createElement('td');

var col = row.insertCell(-1);

col.appendChild(document.createTextNode('hello'));

If using insertRow/Cell, they are already added, there is no need to
explicitly append them so the next two lines are not required.

row.appendChild(col);
el.appendChild(row);

But you still need to add the table to the document of course.

document.getElementById('mydiv').appendChild(el);
}

[...]

1.
insertCell:
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >

insertRow:
<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >

aric.bills · Oct 13, 2006

Rob,

Thanks for the helpful information and the clear way you explained
things. That was just what I needed.

Much obliged,
Aric

Only one table shows up with the information	2	Mar 29, 2023
Internet Explorer Woes	3	Aug 8, 2007
Add recipes using JavaScript in table	20	Apr 17, 2023
XML Parsing Problem in Internet Explorer	1	Oct 11, 2008
Internet Explorer insertRow/insertCell failure	2	Nov 4, 2005
Javascript and Dynamic Table	2	May 27, 2009
DOM Error in internet explorer	2	Aug 2, 2007
Problem displaying table from xml in explorer	0	Sep 23, 2006

can't dynamically generate table in Internet explorer

aric.bills

RobG

aric.bills

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads