Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > A warning about dynamic table creation

Reply
Thread Tools

A warning about dynamic table creation

 
 
Rex the Strange
Guest
Posts: n/a
 
      03-06-2008
BIG WARNING!!

I just spent hours trying to figure this out! If you're doing dynamic
javascript and you're trying to create a table on the fly using
createElement then HEED THIS WARNING!


You would think that you could get away with this:

var page_element = document.getElementById ("parent_element_name");

var table = document.createElement ("table");
var row = document.createElement ("tr");
var cell = document.createElement ("td");

page_element.appendChild (table);
table.appendChild (row);
row.appendChild (cell);

cell.innerHTML = "this is where the live stuff goes";

And Firefox has no problems with this. Internet Explorer will puke!
Well, actually, IE does nothing at all and you can poll your page for
the elements and you will find them. They're there, but they don't
show up on the page. You need:

var body = document.createElement ("tbody"); (or thead or tfoot)

Link that to the table and the row to that:

table.appendChild (body);
body.appendChild (row);

And everything is hunky dorey! I just wasted a big piece of my life on
this one so I'm hoping I can save some people the same heartache. By
the way, Firefox doesn't care either way, so use the latter for better
cross-browser compatibility (also works in Opera and PC Safari - don't
know about Mac Safari).
 
Reply With Quote
 
 
 
 
Henry
Guest
Posts: n/a
 
      03-07-2008
On Mar 6, 7:24 pm, Rex the Strange wrote:
> BIG WARNING!!
>
> I just spent hours trying to figure this out! If you're
> doing dynamic javascript and you're trying to create a
> table on the fly using createElement then HEED THIS
> WARNING!


Or at least the warning implied by this warning.

> You would think that you could get away with this:
>
> var page_element = document.getElementById ("parent_element_name");
>
> var table = document.createElement ("table");
> var row = document.createElement ("tr");
> var cell = document.createElement ("td");
>
> page_element.appendChild (table);
> table.appendChild (row);


No, you absolutely should not expect to be able to "get away with"
that in an HTML DOM. The structural constraints of HTML do not allow a
TR element to be the direct child of any type of element except a
table section element (TBODY, THEAD or TFOOT). It makes as little
sense to attempt to make a TR a direct child of a TABLE as it would to
attempt to make one a direct child of a SELECT element.

> row.appendChild (cell);
>
> cell.innerHTML = "this is where the live stuff goes";
>
> And Firefox has no problems with this.
> Internet Explorer will puke!


No it doesn't. IE just does not tolerate your mistake or take any
action to correct it. That could never be an unexpected outcome as the
spectrum of possible mistakes is far too great to allow them all to be
accommodated, or even for those that are handled to be consistently
handled (over time or across browsers).

> Well, actually, IE does nothing at all and you can poll your
> page for the elements and you will find them. They're there,
> but they don't show up on the page.


So IE does do something. In fact it does precisely what you programmed
it to do; it is just that the nonsense structure you have created
cannot be visually represented by a system that is expecting a
structure resembling an HTML DOM.

> You need:
>
> var body = document.createElement ("tbody"); (or thead or tfoot)


Not "need". Any table section element will do as an intermediate
between the TABLE and the TRs, and in some circumstances a TBODY would
be an inappropriate choice.

> Link that to the table and the row to that:
>
> table.appendChild (body);
> body.appendChild (row);
>
> And everything is hunky dorey!


So building a DOM structure that conforms to the structural
constraints of HTML results in the (reasonably) consistent handling of
that structure (including its rendering)? Now that is something that
you should expect to be able to "get away with".

> I just wasted a big piece of my life on this one so I'm
> hoping I can save some people the same heartache.

<snip>

Which would be better done by identifying the cause and effect
relationship that resulted in your issue rather than shouting about a
specific manifestation of the effect.

You problem is that you are attempting the script the interactions
with an HTML document before understanding what HTML is. That is an
approach that will leave you spending big pieces of your life stabbing
about in the dark trying to solve problems that never needed to occur
in the first place. And that is the real warning here.
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      03-07-2008
Henry wrote:
> On Mar 6, 7:24 pm, Rex the Strange wrote:
>> You would think that you could get away with this:
>>
>> var page_element = document.getElementById ("parent_element_name");
>>
>> var table = document.createElement ("table");
>> var row = document.createElement ("tr");
>> var cell = document.createElement ("td");
>>
>> page_element.appendChild (table);
>> table.appendChild (row);

>
> No, you absolutely should not expect to be able to "get away with"
> that in an HTML DOM. The structural constraints of HTML do not allow a
> TR element to be the direct child of any type of element except a
> table section element (TBODY, THEAD or TFOOT). It makes as little
> sense to attempt to make a TR a direct child of a TABLE as it would to
> attempt to make one a direct child of a SELECT element.


The restriction enforced by the DOM is based on

http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
http://www.w3.org/TR/html4/sgml/loosedtd.html

However, it should be noted that the TBODY element is not necessary to write
in HTML 4.01 markup because both its start tag and its end tag are optional
in all relevant DTDs. Therefore it makes rather little sense to me to
enforce its creation in DOM scripting instead of having it automatically
generated where needed, but there it is.


PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      03-10-2008
Thomas 'PointedEars' Lahn wrote:
> Henry wrote:
>> On Mar 6, 7:24 pm, Rex the Strange wrote:
>>> You would think that you could get away with this:
>>>
>>> var page_element = document.getElementById
>>> ("parent_element_name");
>>>
>>> var table = document.createElement ("table");
>>> var row = document.createElement ("tr");
>>> var cell = document.createElement ("td");
>>>
>>> page_element.appendChild (table);
>>> table.appendChild (row);

>>
>> No, you absolutely should not expect to be able to "get
>> away with" that in an HTML DOM. The structural constraints
>> of HTML do not allow a TR element to be the direct child
>> of any type of element except a table section element
>> (TBODY, THEAD or TFOOT). It makes as little sense to
>> attempt to make a TR a direct child of a TABLE as it would
>> to attempt to make one a direct child of a SELECT element.

>
> The restriction enforced by the DOM is based on
>
> http://www.w3.org/TR/html4/struct/tables.html#h-11.2.1
> http://www.w3.org/TR/html4/sgml/loosedtd.html
>
> However, it should be noted that the TBODY element is not
> necessary to write in HTML 4.01 markup because both its
> start tag and its end tag are optional in all relevant DTDs.


That still results in a TBODY existing. Except in XHTML or course,
where TR may be direct children of TABLE (not a good idea but
understandable given XHTML having some desire to be 'compatible'
with HTML while not tolerating optional tags or implied elements).

> Therefore it makes rather little sense to me to enforce its
> creation in DOM scripting instead of having it automatically
> generated where needed, but there it is.


While it is (obviously as it already happens) possible to 'fix'
attempts to create erroneous DOM structures that programmers attempt
to create by inserting omitted elements the attempt is not without
its issues. First there is what you would do in an XHTML DOM, where
the intervening table section elements is not required, but can be
used; do you add one regardless or always omit them. Then there is
the situation in HTML; if a TR is appended to a table and the table
already has a TBODY do you instead append to the existing TBODY or
add a new one, and if a second TR is appended does it get added to
an existing TBODY (possibly the one added by the last appended TR)
or does it get a new TBODY of its own. Without a very clear
standard on how this situation it to be handled you are likely to
get different outcomes from each and every browser. Followed by lots
of complaints that browsers have bugs because they are not doing
precisely the same as other browsers.

On the whole it is probably better to have the browser create the
DOM structure exactly as the programmer asks it to, and let the
programmer be responsible for building a structure that makes
sense in the type of DOM they are using.
 
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
Dynamic Creation of table philin007@gmail.com ASP General 2 09-26-2006 12:27 PM
Dynamic Creation of table philin007@gmail.com Javascript 2 09-26-2006 12:27 PM
How to (batch) set EXIF date taken and IPTC creation date and creation time for photos with filenames YYMMDDHHMMSS#.jpg? guercheLE@gmail.com Digital Photography 1 10-04-2005 07:15 PM
Dynamic DOM table creation, Mac Internet Explorer 5.2 The_Original_MB Javascript 2 02-07-2005 09:05 AM
Re: Dynamic Table with Dynamic LinkButtons Rick Glos ASP .Net 0 07-08-2003 01:09 PM



Advertisments