Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts

    Cannot append table

    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>

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    taicho2827

    This post is four years old mate
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by taicho2827 View Post
    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 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •