ar********@gmail.com wrote:
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...ment_Interface
>
>
Many thanks,
Aric
<html>
<head>
<titleTest </title>
<script language="javascript">
The language attribute is deprecated, type is required:
<script type="text/javascript">
<!--
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-HTM...ml#ID-68927016 >
insertRow:
<URL:
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-39872903 >
--
Rob
