SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    appendChild creates TBODY

    Hey there,

    I have a TABLE element with ID attribute "newCreationTable".
    Then, I have the following piece of code below to add a row to the table :

    HTML Code:
    var newRow = document.createElement('tr');
    var newCreationTable = document.getElementById('newCreationTable');
    newCreationTable.appendChild(newRow);
    ...but unfortunately it creates a TBODY opening and closing tag.
    How can I prevent the creation of the TBODY tag?

    Reason why I want to prevent this, is because when I execute the code shown above for the 2nd, 3rd, etc.. time, the TABLE is malformed, since the TR elements are created after the TBODY closing tag.

    Thanks for your help!
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tr elements are descended from thead, tfoot or tbody elements in all modern browsers. If you do not specify one of these, a tbody is created to contain the trs before the table is rendered on the screen.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    All tables must have at least one tbody to contain the table rows. If you don't define your table correctly then you force the browser to insert the tbody for you. JavaScript wont allow you to create an incorrect table and so generates the required tbody if you don't create it yourself. The tbody tag identifies the body of the table and comes after the thead and tfoot sections which define the head and foot sections of the table respectively. thead and tfoot are optional and you can have zero or one of each. you can have more than one tbody but you cannot have less than one as with no tbody you have nowhere to put the content of the table. All tr elements must be contained within a thead, tfoot, or tbody.

    The reason you have the problem is that you are using createElement to create parts of a table instead of using the correct DOM calls that exist for working with tables. See http://javascript.about.com/library/bldom15.htm for a list of the DOM commands that you should be using when working with a table.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,454
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)

    tbody tags

    Maybe you could explicitly create your own tbody tags where you want them to be.

  5. #5
    SitePoint Zealot the DtTvB's Avatar
    Join Date
    Jul 2006
    Location
    Thailand
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use insertRow* and insertCell**, instead.

    * MSDN MDC
    ** MSDN MDC

  6. #6
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i 've got the same problem.

    The way i use to resolv this.

    create a tbody element in your table

    use getElementById('tbody_id') instread of getElementById('table_id')

    that's work fine.

    you can see the code in http://gebura.gebura.eu.org/work/design/diablotin/Devis but
    -it isn't finished.
    -it has been wrote in french (var , function names...)

  7. #7
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is better that you detect tbody existence before proceeding with adding tr elements.

  8. #8
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think it was a bit late and I was tired when I posted this.

    Basically, what I did to fix this is manually create the TBODY tags and then insert the TR elements into the TBODY tags instead of the TABLE tags.

    Thanks for your help guys!
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  9. #9
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post a minimized test case instead of posting and url with lots of irrelevant JavaScript files. That way it will be easier to help you. And hey, who know, you might find the bug by minimizing the code into a testcase.

  10. #10
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Post a minimized test case instead of posting and url with lots of irrelevant JavaScript files. That way it will be easier to help you. And hey, who know, you might find the bug by minimizing the code into a testcase.
    Whom are you referring to ?
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  11. #11
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I posted that in the wrong thread


Bookmarks

Posting Permissions

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