Forum: Rails Spinoffs (closed, excessive spam) dynamic table/adding rows in IE using 'new Element("tr")'

51a66c1feadae739b652c4b21aca49b0?d=identicon&s=25 normunds (Guest)
on 2008-01-22 15:24
(Received via mailing list)
I'm trying to create a few menus using prototype.js "insert" function.
I create a table using 'new Element("table")', insert it in DIV and
then add links - one row per link (or the other way round - create a
full table, then insert it).

I initially wrote a code that worked fine in Firefox, but did not in
IE (currently testing with 6.0):
function addLinkToTable(table, link){
    var r = new Element("tr");
    var c = new Element("td");
    table.insert(r.insert(c.insert(link)));
}

The table gets built but is not visible in IE. Then the alternative
function below do not use "new Element()", but instead uses the
standard DOM method to add rows. And it works also in IE:
function addLinkToTable(table, link){
    var r = table.insertRow(table.rows.length);
    var c = r.insertCell(0);
    $(c).insert(link);
}
in fact it's just adding of the row that seems to fail when using "row
= new Element("tr"); table.insert(row)".

I wonder is this something that is "not supposed" to work with
prototype? BTW, if I check the table content created by the first
approach (innerHTML of my DIV), the table looks reasonably good, only
is not visible. In fact if I write:

mydiv.insert (table.outerHTML);

instead of

mydiv.insert (table);

it becomes visible, but of course outerHTML is not not a portable code
and in this way I loose the event handlers for my links, etc. Bad IE
again, or I'm overlooking something?
C19f1f4b52a773cd40348b0557fec344?d=identicon&s=25 Nikodim Lazarov (Guest)
on 2008-01-22 16:19
(Received via mailing list)
2008/1/22, normunds <nkalnberzins@yahoo.com>:
>                 var r = new Element("tr");
>                 $(c).insert(link);
>
> instead of
>
> mydiv.insert (table);
>
> it becomes visible, but of course outerHTML is not not a portable code
> and in this way I loose the event handlers for my links, etc. Bad IE
> again, or I'm overlooking something?
>
>
>
You need to create an additional html element for the table, i.e.
"tbody" as
first child to the table element.
Here is the rewritten method:
function addLinkToTable(table, link){
                var tb = new Element("tbody");
                var r = new Element("tr");
                var c = new Element("td");
                table.insert(tb.insert(r.insert(c.insert(link))));
}


--
Niko
51a66c1feadae739b652c4b21aca49b0?d=identicon&s=25 normunds (Guest)
on 2008-01-22 16:58
(Received via mailing list)
Thanks Niko; I agree, to certain point - I also suspected that
addition of "tbody" could be a possible workaround/"improvement".
Though it does not seem to be mandatory anywhere except in the DOM
interpretation of IE, right? IE and anybody else happily uses HTML
string of format "<table><tr><td></td></tr></table>" without any hint
of "tbody".

I wonder if there are any other cases where "insert" of HTML string
works, but insert of the equivalent object fails? I do not recall any.

Normunds
F2c683e7dc0c4d4bcc790f87eaa67301?d=identicon&s=25 RobG (Guest)
on 2008-01-23 04:23
(Received via mailing list)
On Jan 23, 1:57 am, normunds <nkalnberz...@yahoo.com> wrote:
> Thanks Niko; I agree, to certain point - I also suspected that
> addition of "tbody" could be a possible workaround/"improvement".

A tbody element is only required in IE if you use the DOM Core
createElement method, e.g.

Method 1:

  var table = document.createElement('table');
  var tbody = document.createElement('tbody');
  var row = document.createElement('row');
  table.appendChild(tbody);
  tbody.appendChild(row);

However, if you use the insertRow convenience method, you don't need
to explicitly add the tbody or append the row.  The following is
equivalent to the above.

Method 2:

  var table = document.createElement('table');
  var row = table.insertRow(-1);

Note: do not omit the mandatory row index.  IE will allow it,
defaulting to -1, but others will not (see link below).


> Though it does not seem to be mandatory anywhere except in the DOM
> interpretation of IE, right? IE and anybody else happily uses HTML
> string of format "<table><tr><td></td></tr></table>" without any hint
> of "tbody".

The DOM is built from HTML, they are two separate animals.  A tbody
*element*  is mandatory in an HTML table element, however the *tags*
are optional in the HTML markup.

When using method 1 above, most browsers allow you to omit the
explicit tbody creation, but not IE.  Using method 2, IE creates the
implied tbody element as specified in the W3C DOM 2 HTML
specification:

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


--
Rob
This topic is locked and can not be replied to.