Dynamically create table 3

[AP81]

Hi,

I have a table automatically generated via PHP (about 200 or so lines of code). Each table row has an ID and an onclick function onclick="copyRow(this.id);"

I have a <div id="placeholder"></div> in the page, and when I click a table row, I want to place that table row in the div placeholder, i.e.

function copyRow(id)
{
  var placeholder = document.getElementById('placeholder');
  var tableRow = document.getElementById(id);
  // create table if no table rows already exists
  // if row not already in table, then add it to table
}

So if I click 10 different rows, then all these 10 rows will appear in this placeholder. I've experimented with a few things, but have been unsuccessful.

Can someone give me some pointers as to how to do this?

 

[feherke]

Hi

Copying table rows into a [tt]div[/tt] sounds bad. Why not use a [tt]table[/tt] ?

<script type="text/javascript">
function copy(what)
{
  document.getElementById('placeholder').appendChild(what.cloneNode(true))
}
</script>

[gray]<!-- ... -->[/gray]

<table>
<tr><th>#</th><th>source</th></tr>
<tr id="r1" onclick="copy(this)"><td>1</td><td>one</td></tr>
<tr id="r2" onclick="copy(this)"><td>2</td><td>two</td></tr>
<tr id="r3" onclick="copy(this)"><td>3</td><td>three</td></tr>
</table>

<table id="placeholder">
<tr><th>#</th><th>destination</th></tr>
</table>

Note that the above code snippet works with standard compliant browsers. ( As far as I remember Explorer 6 has problems with [tt]cloneNode()[/tt]. )

Feherke.

http://rootshell.be/~feherke/

 

[tsuji]

[0] As far as I know, cloneNode() is supported in ie6 no problem.

[1] This is how to do it with special care of uniqueness of id and of the preservation of the onclick functionality of the copied/cloned row (with their id reflecting even the generation of the clone). It should work cross-browser.
[tt]
function copyRow(obj) {
var oclone=obj.cloneNode(true);
oclone.id=oclone.id+"_clone";
var ctag=oclone.getElementsByTagName("*");
for (var i=0; i<ctag.length;i++) {
ctag.id+="_clone"+i;
}

otbl=document.createElement("table");
otbl.border="1";
otbl.style.backgroundColor="ivory";
otbody=document.createElement("tbody");
otbl.appendChild(otbody);
otbody.appendChild(oclone);

var odiv=document.getElementById("placeholder");
odiv.innerHTML="";
odiv.appendChild(otbl);
}
[/tt]
[1.1] It has been elected to opt for passing row object itself rather than with a twist of its id then retrieving itself.
[tt] <tr id="xyz" onclick="copyRow(this)">[/tt]

 

[feherke]

Hi

According to Peter-Paul Koch, A cloned table row (<tr>) stops being a table row element in IE.

But the problem which was in my mind referred to the use of [tt]deep[/tt] parameter. No idea where I found that article...

Feherke.

http://rootshell.be/~feherke/

 

[tsuji]

Greetings. ... only if it is not appeared in the proper table element with tbody which should be in any sense the way to treat tr to start with. (One can continue to fabricate all kind of anomalies, option tag outside of select, input/textarea outside of form...) There is a specific table object model (tom) extension (if that's the word) on top of the dom html-flavor which ie and moz all support... (.rows, .cells, insertRow(), insertCell()...)

 

[tsuji]

In any case, I had forgotten to var the otbl and otbody to settle their scope. Should add them there as an amendment.

 

[feherke]

Hi

Well, that sounds reasonable. But while [tt]option[/tt] outside of [tt]select[/tt] is invalid, [tt]table[/tt] without [tt]tbody[/tt] is valid. At least for the markup's point. But FireFox indeed shows [tt]tbody[/tt] tags added when you look at the generated source of a document.

I will investigate abit on this myself. Anyway, thanks for the information.

Feherke.

http://rootshell.be/~feherke/

 

[tsuji]

tbody is something special. If, by script, you create table without following through with tbody, there could be some display problem to say the least. In my implementation of the requested functionality, if you omit the otbody part, the problem could show up (ie at least, I might have to check too). But I am not assiduous in documenting all that - one ends up with all rules flying... - just retain solid bone structure without falling into the trap of listening to those fanfare and flonflon of superficial partisan non-sense, and then iron out the ripple along the way: that's my approach.

 

[AP81]

Thanks for the advice...will give it a go.