Trying to use javascript DOM to insert TABLE, not working

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • lxfc97
    New Member
    • Feb 2008
    • 9
    #1

    Trying to use javascript DOM to insert TABLE, not working

    Hi,

    I'm trying to use the DOM to insert a TABLE into a DIV tag.

    Can anyone tell me what I'm doing wrong here?

    The code looks straightforward , but it is not working.

    Thanks,
    Dave
    --------------------------------------------------------------
    [HTML]<HTML>
    <BODY>
    <SCRIPT>
    function InitPage() {

    var text1 = document.create TextNode("cell contents")

    var td1 = document.create Element("TD")
    td1.appendChild (text1)
    var tr1 = document.create Element("TR")
    tr1.appendChild (td1)
    var table1 = document.create Element("TABLE" )
    table1.appendCh ild(tr1)

    document.getEle mentById("text" ).appendChild(t able1)
    }
    </SCRIPT>

    <DIV id=text>x</DIV>
    <BR>
    <INPUT type=button onclick=InitPag e() value=go!>
    </BODY>
    </HTML>[/HTML]
    Last edited by gits; Apr 30 '08, 06:09 AM. Reason: added code tags
    Tags: None
    • rpnew
      New Member
      • Aug 2007
      • 189
      #2
      Originally posted by lxfc97
      Hi,

      I'm trying to use the DOM to insert a TABLE into a DIV tag.

      Can anyone tell me what I'm doing wrong here?

      The code looks straightforward , but it is not working.

      Thanks,
      Dave
      --------------------------------------------------------------
      [HTML]<HTML>
      <BODY>
      <SCRIPT>
      function InitPage() {

      var text1 = document.create TextNode("cell contents")

      var td1 = document.create Element("TD")
      td1.appendChild (text1)
      var tr1 = document.create Element("TR")
      tr1.appendChild (td1)
      var table1 = document.create Element("TABLE" )
      table1.appendCh ild(tr1)

      document.getEle mentById("text" ).appendChild(t able1)
      }
      </SCRIPT>

      <DIV id=text>x</DIV>
      <BR>
      <INPUT type=button onclick=InitPag e() value=go!>
      </BODY>
      </HTML>[/HTML]
      Hi,
      Your code is working with me. what error do you get?
      Are you getting text 'cell contents' on web page?

      Regards,
      RP

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5390
          #3
          in IE you have to append to the <tbody> ... have a look here for some browser specific inconsitencies ...

          kind regards

            Comment

            • lxfc97
              New Member
              • Feb 2008
              • 9
              #4
              Hi,

              Thanks very much for taking the time to respond to my query. I got my code to work in IE 6 by adding the TBODY to the table creation code.
              However, even with the TBODY in the table, the code doesn't work in Netscape or Firefox. In fact, in the code below, the statement ****document.ge tElementById("T ableDiv").appen dChild(table1)* *** halts execution of the NS 6 browser (there is no error message).

              Would anybody know why?

              I apologize if this is an obvious queston.

              Thanks very much,
              Dave

              Here's the updated code:
              ----------
              [HTML]<HTML>
              <HEAD>
              <SCRIPT>

              function InitPage() {

              var text1 = document.create TextNode("START ")
              var td1 = document.create Element("TD")
              td1.appendChild (text1)
              var tr1 = document.create Element("TR")
              tr1.appendChild (td1)
              var tbody1 = document.create Element("TBODY" )
              tbody1.appendCh ild(tr1)
              var table1 = document.create Element("TABLE" )
              table1.appendCh ild(tbody1)

              document.getEle mentById("Table Div").appendChi ld(table1)
              }

              </SCRIPT>
              </HEAD>

              <BODY>
              <DIV id=tablediv></DIV>
              <BR>
              <INPUT type=button onclick=InitPag e() value=go!>
              </BODY>
              </HTML>[/HTML]
              Last edited by acoder; May 1 '08, 09:52 AM. Reason: Added code tags

                Comment

                • lxfc97
                  New Member
                  • Feb 2008
                  • 9
                  #5
                  Hi,

                  Thanks very much for the help, but I found the NS error.
                  I had caps in TableDiv in the addChild statement, but all
                  lower caps for the ID attribute in the HTML.

                  Sorry for the confusion.

                  Again, thank you very much for the help.

                  Dave

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      If you had checked the Firefox error console, you would've found this message:
                      Code:
                      document.getElementById("TableDiv") has no properties
                      Don't test in IE first otherwise you won't pick up these errors. That should never have worked in IE because JavaScript is case-sensitive and if the case differs the ID is different.

                      One final note: you should quote your attributes, e.g.
                      [html]<DIV id="text">x</DIV>
                      <BR>
                      <INPUT type="button" onclick="InitPa ge()" value="go!">[/html]
                      Anyway, glad you found the error and thanks for posting.

                        Comment

                        • lxfc97
                          New Member
                          • Feb 2008
                          • 9
                          #7
                          Hi,

                          Thanks for the info.
                          I'll quote my attributes from now on (I wasn't because I didn't think I needed to,
                          but it's always better to follow standards).

                          I'll also check the Netscape/Firefox error console from now on.

                          Thanks again very much,
                          Dave

                            Comment

                            • lxfc97
                              New Member
                              • Feb 2008
                              • 9
                              #8
                              IHi,

                              'm not sure if anybody is still reading this thread but I just figured out
                              that if you want to be XHTML compliant then you need to quote your
                              attributes.

                              Thanks again,
                              Dave

                                Comment

                                • acoder
                                  Recognized Expert MVP
                                  • Nov 2006
                                  • 16032
                                  #9
                                  Originally posted by lxfc97
                                  I just figured out that if you want to be XHTML compliant then you need to quote your attributes.
                                  and your tag names and attributes should be lower-case, elements must be closed, etc. but you'd figure that out when you validate.

                                    Comment

                                    • lxfc97
                                      New Member
                                      • Feb 2008
                                      • 9
                                      #10
                                      Hi,

                                      Thanks for the info.
                                      It'd take me a while to figure that out while validating. :)

                                      Thanks again,
                                      Dave

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          No problem, you're welcome :)

                                            Comment

                                            Previous template Next
                                            Working...