Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > can't dynamically generate table in Internet explorer

Reply
Thread Tools

can't dynamically generate table in Internet explorer

 
 
aric.bills@gmail.com
Guest
Posts: n/a
 
      10-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">
<!--

window.onload = init;

function init() {

var el = document.createElement('table');
var row = document.createElement('tr');
var col = document.createElement('td');
col.appendChild(document.createTextNode('hello'));
row.appendChild(col);
el.appendChild(row);
document.getElementById('mydiv').appendChild(el);
}

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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-13-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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>
> <title> Test </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

 
Reply With Quote
 
 
 
 
aric.bills@gmail.com
Guest
Posts: n/a
 
      10-13-2006
Rob,

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

Much obliged,
Aric

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Internet Explorer 8: C:\Program Files\Internet Explorer\iexplore.exe vs C:\Program Files (x86)\Internet Explorer\iexplore.exe Nathan Sokalski Windows 64bit 16 02-22-2010 08:31 AM
internet explorer 7 - Internet Explorer cannot display the webpag sandy j Windows 64bit 0 05-02-2009 02:12 AM
generate the controls in the table dynamically iHavAQuestion ASP .Net 2 05-06-2008 07:54 PM
how to generate html table from "table" data? petr.jakes.tpc@gmail.com Python 9 12-28-2007 09:44 AM
dynamically generate listcheckbox in a table based on another check box list KBuser ASP .Net 0 04-10-2006 06:56 PM



Advertisments