«

I am using the appendChild method to create a table dynamically. The
only problem is that the code does not append the table elements to
the correct table. I basically have one table nested in another and
while I would like it append to the inner table, it appends to the
outer table.

Any help would be appereciated.

Here is the JavaScript....

function addRequest()
{
var choiceIndexValue =
parseInt(document.test1.choiceIndex.value);
var amountOfYardsValue =
parseInt(document.test1.amount_of_yards_requested. value);
var colorsValue = document.test1.color_requested.value;
var dateNeededValue = document.test1.date_needed.value;;

var tablebody = document.getElementById("toContentTBody");

var row = document.createElement("TR");
row.setAttribute("id","row"+choiceIndexValue);
row.style.background="#EBE8DF";
row.setAttribute("class","slot");
if (choiceIndexValue %2 == 0)
row.setAttribute("class","slotEven");
//row.style.background="#FAF9F6";

var cell = document.createElement("TD");
cell.setAttribute("align","center");
cell.setAttribute("valign","top");
cell.innerHTML = "<input type=checkbox id=choices name=choices>";

var cell1 = document.createElement("TD");
cell1.setAttribute("valign","top");
cell1.setAttribute("align","center");

cell1.appendChild(document.createTextNode(""+amoun tOfYardsValue));

var cell2 = document.createElement("TD");
cell2.setAttribute("valign","top");
cell2.setAttribute("align","center");

cell2.appendChild(document.createTextNode(""+color sValue));

var cell3 = document.createElement("TD");
cell3.setAttribute("valign","top");
cell3.setAttribute("align","center");
cell3.appendChild(document.createTextNode(" "+dateNeededValue));



row.appendChild(cell)//checkbox
row.appendChild(cell1);//amount
row.appendChild(cell2);//color
row.appendChild(cell3);//date needed


tablebody.appendChild(row);

}

Here is the HTML...

<TABLE backgound="" border="0" cellpadding="4" cellspacing="0"
width=100%>

<%@include file="yardage_include.jsp"%>




<TR valign="top">
<TD valign="top" align="left" nowrap colspan=4
class="slotHeader">Yardage Inquiry</TD>
</tr>
<TR>
<td colspan="4">
<table id="toContent" width="100%" cellspacing=2 cellpadding=0
border=0>
<TBODY id="toContentTBody">
<TR valign="top" class="columnHeader">
<td></td>
<TD align="left" nowrap><b>Amount In Yards</b></TD>
<TD align="left" nowrap><b>Colors </b></TD>
<TD align="left" nowrap><b>Date Needed</b></TD>
<TD align="left"></TD>
</TR>
<TR valign="top">
<td></td>

<TD nowrap align="left"><INPUT type="text"
name="amount_of_yards_requested" size="4" value="50"></TD>
<TD align=left><INPUT type="text"
name="color_requested" size="15" value="Navy"></TD>
<TD nowrap align="left"><INPUT type="text"
name="date_needed" size="10" value="5/15/2004"
align="center"></TD>
<TD align="left"><INPUT type="button" name="add_button"value="Add"
onClick="addRequest()"></TD>
</TR>
<TR >
<TD nowrap></TD>
<TD ></TD>
<TD nowrap></TD>
<TD ></TD>
</TR>
<%
if(dataVO != null ) {
Collection dataItems = dataVO.inquiryDetails;
if(dataItems == null)
dataItems = new ArrayList();
Iterator itemItr = dataItems.iterator();
while (itemItr.hasNext()) {
SampleYardageItemData itemData = (SampleYardageItemData)
itemItr.next();

%>
<TR class="slot">

<TD align="left" colspan="1" ><INPUT type="checkbox"
name="delete_select" align="center"></TD>
<TD nowrap align="left" colspan="1" ><pdd:value
text="<%=itemData.amount%>"/></TD>
<TD align="left" colspan="1" ><pdd:value
text="<%=itemData.color%>"/></TD>
<TD nowrap align="left"colspan="1" ><pdd:value
text="<%=itemData.dateNeeded %>"/></TD>
<TD></TD>
</TR>
<% } %>
</TBODY>
</table>
</td>
</TR>
<tr>
<TD valign="top" align="left" nowrap width="132">&nbsp;
Comments</TD>
<TD valign="top" align="left" colspan="3" ><TEXTAREA rows="3"
cols="35">please rush availability, buyer needs for 5/15 commit
date</TEXTAREA></TD>
</tr>
<% } %>
<TR valign="top">
<TD nowrap align="center" width="132"></TD>
<TD align="left"></TD>
<TD colspan="2" nowrap align="right" >
<INPUT type="button" name="Save" value="Save"
onclick="javascript:gotoFile('FMS/fms_search_results_details.htm')">&nbsp;
<INPUT type="button" name="Send Inquiry" value="Send Inquiry"
onclick="javascript:gotoFile('FMS/fms_search_results_details.htm')"
>&nbsp;
<INPUT type="button" name="Delete" value="Delete"
onclick="removeRequest()">&nbsp;
<INPUT type="button" name="Cancel" value="Cancel"
onclick="javascript:gotoFile('FMS/fms_search_results_details.htm')">
</TD>
</TR>