Dom copy table

[Liming]

hello,

I have the follwoing code

<div id="detailtable" style="visibility:hidden">
<table id="detailtablehidden" width="100%" border="0">
....
</table>
</div>

I'm trying to copy the table inside to another table by appending it to
a td tag.

...
var the_table = document.getElementById("detailtable").innerHTML;
var td_content = document.createTextNode(the_table);
td.appendChild(td_content);

The problem right now is that I'm getting the table inserted as Text
instead of html. the follwing is an example. Please help


&lt;table _vpps_id=&quot;65&quot; id=&quot;detailtablehidden&quot;
border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;thead&gt; &lt;tr
_vpps_id=&quot;66&quot;&gt; &lt;td _vpps_id=&quot;67&quot;&gt;Student
Name &lt;/td&gt; &lt;td
_vpps_id=&quot;68&quot;&gt;PaymentAmount&lt;/td&gt; &lt;td


Thankks

 

[RobG]

hello,

I have the follwoing code

<div id="detailtable" style="visibility:hidden">
<table id="detailtablehidden" width="100%" border="0">
....
</table>
</div>

I'm trying to copy the table inside to another table by appending it to
a td tag.

..
var the_table = document.getElementById("detailtable").innerHTML;
var td_content = document.createTextNode(the_table);
td.appendChild(td_content);

You are mixing DOM with proprietary (though widely copied) MS
functionality. You should use either one or the other - preferably
DOM, particularly as there are issues with innerHTML and tables.

The following are purely examples, take note of issues. When
copying/cloning elements, you must be careful not to end up with
invalid HTML. One particular issue is that you must ensure that
duplicated elements get unique ids if you have an ID on the element
being cloned and it will remain in the page.

DOM
You can only append a table to another element that is allowed to
have a table inside it - div, body, etc.

You can 'clone' an entire element very simply, it makes an exact copy
so if you clone something with an id and don't remove the original, you
will have duplicate ids which is not valid and may cause issues.

var the_table = document.getElementById(t);
var newTable = the_table.cloneNode(true);
newTable.id = 'visibleTable';
document.body.appendChild(newTable);

The big advantage of DOM is that you can append the table easily to any
existing element, it doesn't have to be the body, or any new element
you create. You can access the properties of the new element directly
- it's easy to change the id. We can also access the elements inside
the table too - rows, cells, etc. and their attributes.

innerHTML
innerHTML will replace the HTML inside an element. For a table, you
need to put it inside something like a div, so create one and put the
copied table in there:

var the_table = document.getElementById(t).innerHTML;
var oDiv = document.createElement('div');
document.body.appendChild(oDiv);
oDiv.innerHTML = the_table;

The disadvantage with innerHTML is that it totally replaces the
content of the element it is 'append' to. This can be a short-cut when
you want to replace the content, but it's a bit clumsy if you don't -
you have to create a new 'container' to put it in.

It is also much harder to access the properties of the cloned node and
its children - try changing the id of the table, or the content of one
of the cells.

innerHTML is really handy for simple replacement of element content,
but not very good if any kind of other processing is required. It
can't be used to replace parts of a table in IE (say replace or add a
row or cell).

The problem right now is that I'm getting the table inserted as Text
instead of html. the follwing is an example. Please help


&lt;table _vpps_id=&quot;65&quot; id=&quot;detailtablehidden&quot;
border=&quot;0&quot; width=&quot;100%&quot;&gt; &lt;thead&gt; &lt;tr
_vpps_id=&quot;66&quot;&gt; &lt;td _vpps_id=&quot;67&quot;&gt;Student
Name &lt;/td&gt; &lt;td
_vpps_id=&quot;68&quot;&gt;PaymentAmount&lt;/td&gt; &lt;td

Whatever you insert with innerHTML is parsed by the browser and
rendered. Insert text and that's what you'll get.

 

[Liming]

Rob,

oh my god, thank you so much.

I didn't expect anyone to give me such a great detailed reply plus such
a great mini-tutorial, it sure helped me cleared up a few concepts.

I'm saving this piece. lol.

thanks again. I followed your code and bang, everythign works as it is
suppose to.

Thanks again.

Lim