[Javascript] document.createElement("TBODY")

[Michael Borchers]

----- Original Message ----- 
From: "Hassan Schroeder" <hassan at webtuitive.com>
To: "[JavaScript List]" <javascript at LaTech.edu>
Sent: Tuesday, April 17, 2007 5:36 PM
Subject: Re: [Javascript] document.createElement("TBODY")


> Michael Borchers wrote:
>
>> Is there any other way to parse the response than innerHTML?
>
> Using innerHTML is not "parsing" the response. At all. It's sticking
> a lump of cr--, er, whatever, into your page, rather than explicitly
> (and IMHO properly) inserting elements into the DOM.
>
> For simplicity's sake, let's say this row is returned by an AJAX
> request:
>
>   <tr><td>now</td><td>is</td><td>the</td><td>time</td></tr>
>
> :: and you want to insert it into a tbody with the id "tb".
>
> /* using Prototype */
> function append(row)
> {
> var tr = document.createElement("tr");
> $('tb').appendChild(tr);
> var cells = row.firstChild.getElementsByTagName("td");
> $A(cells).each( function(cell){
> var text =
>                    document.createTextNode(cell.firstChild.nodeValue);
> var td = document.createElement("td");
> td.appendChild(text);
> tr.appendChild(td);
> });
> }
> function fetch()
> {
> new Ajax.Request("/tr.jsp", {
> onSuccess  : function(transport){
> append(transport.responseXML); },
> onFailure  : function(){ alert('failed'); }
> });
> }
>
> At least, that's how I'd do it :-)

Hi Hassan, I found a solution for my needs now. Let me explain:
When I first realized that I could not use the innerHTML für TABLEs,
I decided to use a DIV that would be filled up instead.
Since I needed the table layout the innerHTML did not start with
a TR or TBODY but with a complete new TABLE.
"Unfortunately" the table cells had relative widths. In the end I had
lots of TABLES, some with THEAD and TFOOT that would not look
unique in their layout.

The solution itself was good and finally I realized that it would be "easy"
to format the TABLEs with CSS. So I did and now everything looks absolutely
fine.


Still I had some problems:
The innerHTML for the DIV included <select>s. When somebody selected an 
option
and than added a new row to the DIV via innerHTML I had to add the existing
innerHTML in order not to lose any data. But here comes the problem:

When adding innerHTML to a DIV and re-adding the existing innerHTML
(f.e. myDiv = newContent + myDiv.innerHTML) the selected options in a form
<select> dissappears.

So my solution was a little bit similar to yours, at least in the first 
steps.
I created a new DIV in the existing DIV and just parsed the new innerHTML
there.

Everything works very fine now. By the way: The FORM I was talking about
is a products selection. Each time you select a product the page gets a 
products
price and description and automatically calculates them by quantity and 
shows
the total price. And I needed the innerHTML for a new product row.
This is great, thanks to AJAX "desktop-lookalike-software" in a webbrowser 
is no
more problem;)