...

View Full Version : Adding tables to the DOM



Forever Zero
08-08-2008, 03:35 PM
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:


<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

shyam
08-08-2008, 07:11 PM
why not just show hide the div?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum