...

View Full Version : Cannot append table



Mr J
10-14-2003, 12:27 AM
Can someone tell me why I can append the DOM table to any of the DIV's but cannot append the DOM table between table one and two







<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<Script>
<!--
function addTable(){
mytable=document.createElement("TABLE");
mytable.setAttribute("border","2")

t_body=document.createElement("TBODY");

for(r=0;r<1;r++){
newrow=document.createElement("TR");

for(c=0;c<1;c++){
newcell = document.createElement("TD");
new_text=document.createTextNode("Table 3");
newcell.appendChild(new_text);
newrow.appendChild(newcell);
}

t_body.appendChild(newrow);
}

mytable.appendChild(t_body);
//doc_body=document.getElementsByTagName("DIV").item(3) // append a DIV
doc_body=document.getElementsByTagName("TABLE").item(0)
doc_body.appendChild(mytable);
}
// -->
</script>

</HEAD>
<BODY onload="addTable()">
<form name="f1">
<TABLE border="1"><TBODY><tr><td>Table</td><td>One</td</tr></TBODY></TABLE>
<TABLE border="1"><TBODY><tr><td>Table</td><td>Two</td></tr></TBODY></TABLE>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</BODY>
</HTML>

nolachrymose
10-14-2003, 02:34 AM
You're appending the created table to the first table. Try changing this:


//doc_body=document.getElementsByTagName("DIV").item(3) // append a DIV
doc_body=document.getElementsByTagName("TABLE").item(0)
doc_body.appendChild(mytable);

...to this:


var doc_body = document.getElementsByTagName("table").item(1);
var div = doc_body.parentNode;
div.insertBefore(myTable, doc_body);

I *think* that will work.

Hope that helps!

Happy coding! :)

Mr J
10-14-2003, 06:50 PM
Thank you, your solution does work.

I am just learning the DOM scripting so I am puzzled as to why appendChild() will append my table to any other tag I choose but not a table tag
:confused:

liorean
10-14-2003, 07:13 PM
Bacause a table element can't be a child of a table element? Or perhaps it appends it but the browser doesn't render it?

taicho2827
07-31-2007, 06:22 PM
Well to answer your question every table MUST have a <tbody> tag. If it is not explicitly defined it will implicitly create one for you. :) Here is a little javascript snippet that will help you with your coding.

function createTable()
{
// create the new table tag
var table = document.createElement("table");

// create the new table body tag
var tbody = document.createElement("tbody");

// create the new table row tag
var tr = document.createElement("tr");

// create the new table definition tag
var td = document.createElement("td");

// create the new tag of your choice to go into the tag.
var text = document.createElement("textarea");


// create the outer tr to go around the newly created table
var OuterTR = document.createElement("tr");

// create the outer td to go around the newly created table
var OuterTD = document.createElement("td");

// append tags accordingly.
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr);
table.appendChild(tbody);
OuterTD.appendChild(table);
OuterTR.appendChild(OuterTD);


var myTable = document.getElementById("tbody");
myTable.appendChild(OuterTR);

}

Then all you have to have is a table described in your html. IE:

<html>
<head>
</head>

<body>
<table>
<tbody id='tbody'>
</tbody>
</table>
</body>

</html>

Mr J
07-31-2007, 10:36 PM
taicho2827

This post is four years old mate

Arbitrator
08-01-2007, 01:53 AM
Well to answer your question every table MUST have a <tbody> tag.The correct terminology is tbody element. You donít manipulate tags except when using things like document.write or innerHTML.


Then all you have to have is a table described in your html. IE:

<html>
<head>
</head>

<body>
<table>
<tbody id='tbody'>
</tbody>
</table>
</body>

</html>This document is invalid. The outer elements should be created via scripting too.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum