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 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2005
    Location
    Massachusetts, US
    Posts
    37
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Adding tables to the DOM

    Hey everyone,

    SHORT VERSION: I am trying to put the table code below into the DOM when the user presses a button.

    LONGER VERSION:
    I have run into some trouble with a script I am trying to make which involves adding a table with rows and cells in it to the DOM.

    I am going to have a button, and when clicked, it should add this HTML code to the DOM:
    Code:
            <div class="data">
                <table border="0" cellpadding="5" cellspacing="1" bgcolor="#000000" width="300px">
                    <tr bgcolor="#5577AA" align="center">
                        <td colspan="3">
                            <font face="verdana" size="3">
                                <b>Data set 3 </b>
                            </font>
                        </td>
                    </tr>
                    <tr bgcolor="#88AACC">
                        <td>
                            X
                        </td>
                        <td>
                            Y
                        </td>
                    </tr>
                    <tr bgcolor="#EEEEEE">
                        <td>
                            <input type="text" size="5" name="d3x1" id="d3x0" />
                        </td>
                        <td>
                            <input type="text" size="5" name="d3y1" id="d3y0" />
                        </td>
                    </tr>
                    <tr bgcolor="#BBBBBB">
                        <td>
                            <input type="text" size="5" name="d3x2" id="d3x1" />
                        </td>
                        <td>
                            <input type="text" size="5" name="d3y2" id="d3y1" />
                        </td>
                    </tr>
                    <tr bgcolor="#EEEEEE">
                        <td>
                            <input type="text" size="5" name="d3x3" id="d3x2" />
                        </td>
                        <td>
                            <input type="text" size="5" name="d3y3" id="d3y2" />
                        </td>
                    </tr>
                    <tr bgcolor="#BBBBBB">
                        <td>
                            <input type="text" size="5" name="d3x4" id="d3x3" />
                        </td>
                        <td>
                            <input type="text" size="5" name="d3y4" id="d3y3" />
                        </td>
                    </tr>
    				<tr align="center" bgcolor="#777777">
    					<td colspan="2">
    						<input type="text" size="40" id="d3legend" value="Type your label for this data here" />
    					</td>
    				</tr>
                    <tr bgcolor="#5577AA" align="center">
                        <td colspan="2">
                            <input type="button" value="Set new data" onClick="setData();"/>
                        </td>
                    </tr>
                </table>
            </div>
    I attempted to create a new DIV element, and then assign that code as its innerHTML, but it all would need to be on one line. Technically this would work, but I know there has to be a better way of doing this.

    Any help would be greatly appreciated,

    Alex

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    why not just show hide the div?
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow


  •  

    Posting Permissions

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