Cannot append table

Mr J · 10-13-2003, 11:27 PM

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>

</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, 01:34 AM

You're appending the created table to the first table. Try changing this:

Code:

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

...to this:

Code:

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, 05: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

liorean · 10-14-2003, 06: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, 05: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, 09:36 PM

taicho2827

This post is four years old mate

Arbitrator · 08-01-2007, 12:53 AM

Quote:

Originally Posted by taicho2827

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.

Quote:

Originally Posted by taicho2827

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.