Creating rows on first table?

Anyone have any ideas on why the extra rows are being created on the first table in my asp page? I have 3 tables but need the row to be created on the last table, with the ID of 'OASales'.

<table border=1 cellpadding=0 cellspacing=0" width="800px" ID='OASales'>
<Script>

function addRow()
{
ELpntr++;
content1='<select name="SalesStaff'+ELpntr+'" onChange="addRow()">';

var ELpntr=1;
var content1='';
var content2='<input name="Reff_Bonus'+ELpntr+'A">';
var content3='<input name="Lead_Bonus'+ELpntr+'B">';
var content4='<input name="Chrg_Dept'+ELpntr+'C">';
var content5='<input name="Comm'+ELpntr+'D">';
var content6='<input name="Gty_Comm'+ELpntr+'E">';
var content7='<input name="Adv_Comm'+ELpntr+'F">';
var content8='<input name="PTO_Dollars'+ELpntr+'G">';
var content9='<input name="Gty_Comm'+ELpntr+'H">';


tabBody=document.getElementsByTagName("TBODY").item(0);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");
cell5 = document.createElement("TD");
cell6 = document.createElement("TD");
cell7 = document.createElement("TD");
cell8 = document.createElement("TD");
cell9 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
cell4.innerHTML=content4;
cell5.innerHTML=content5;
cell6.innerHTML=content6;
cell7.innerHTML=content7;
cell8.innerHTML=content8;
cell9.innerHTML=content9;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tabBody.appendChild(row);

I think you are appending to the first table

this line possibly should be

tabBody=document.getElementsByTagName("TBODY").item(2);

This is what I used

<table border="1"><tr><td>Table</td><td>One</td</tr></table><BR><BR>

<table border="1"><tr><td>Table</td><td>Two</td></tr></table><BR><BR>

<table border=1 cellpadding=0 cellspacing=0" width="800px" ID='OASales'>

<Script>
function addRow(){
ELpntr++;
content1='<select name="SalesStaff'+ELpntr+'" onChange="addRow()">';

var ELpntr=1;
var content1='';
var content2='<input name="Reff_Bonus'+ELpntr+'A">';
var content3='<input name="Lead_Bonus'+ELpntr+'B">';
var content4='<input name="Chrg_Dept'+ELpntr+'C">';
var content5='<input name="Comm'+ELpntr+'D">';
var content6='<input name="Gty_Comm'+ELpntr+'E">';
var content7='<input name="Adv_Comm'+ELpntr+'F">';
var content8='<input name="PTO_Dollars'+ELpntr+'G">';
var content9='<input name="Gty_Comm'+ELpntr+'H">';


tb=document.createElement("TBODY");
document.getElementById("OASales").appendChild(tb);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");
cell5 = document.createElement("TD");
cell6 = document.createElement("TD");
cell7 = document.createElement("TD");
cell8 = document.createElement("TD");
cell9 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
cell4.innerHTML=content4;
cell5.innerHTML=content5;
cell6.innerHTML=content6;
cell7.innerHTML=content7;
cell8.innerHTML=content8;
cell9.innerHTML=content9;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tabBody=document.getElementsByTagName("TBODY").item(2);
tabBody.appendChild(row);
}
addRow()
</script>

Thanks, it is adding to the third table now! Any idea how I can get it to keep the input size on the additional rows created?

The first row is:

<td><font size=-1 ><input name="Reff_Bonus" size="9" value="<%=Reff_Bonus%>"></TD>
<td><font size=-1 ><input name="Lead_Bonus" size="9" value="<%=Lead_Bonus%>"></TD>
<td><font size=-1 ><input name="Chrg_Dept" size="9" value="<%=Chrg_Dept%>"></TD>
<td><font size=-1 ><input name="Comm" size="9" value="<%=Comm%>"></TD>
<td><font size=-1 ><input name="Gty_Comm" size="9" value="<%=Gty_Comm%>"></TD>
<td><font size=-1 ><input name="Adv_Comm" size="9" value="<%=Adv_Comm%>"></TD>
<td><font size=-1 ><input name="PTO_Dollars" size="9" value="<%=PTO_Dollars%>"></TD>

But the rows that are created with the Java have cells that are way to big and I can't figure out how to add the size="9" to the script. Any ideas?
var ELpntr=1;
var content1='';
var content2='<input name="Reff_Bonus size=9'+ELpntr+'A">';
var content3='<input name="Lead_Bonus'+ELpntr+'B">';
var content4='<input name="Chrg_Dept'+ELpntr+'C">';
var content5='<input name="Comm'+ELpntr+'D">';
var content6='<input name="Gty_Comm'+ELpntr+'E">';
var content7='<input name="Adv_Comm'+ELpntr+'F">';
var content8='<input name="PTO_Dollars'+ELpntr+'G">';
var content9='<input name="Gty_Comm'+ELpntr+'H">';

Try this


var ELpntr=1;
var content1='';
var content2='<input size=9 name="Reff_Bonus'+ELpntr+'A">';
var content3='<input size=9 name="Lead_Bonus'+ELpntr+'B">';
var content4='<input size=9 name="Chrg_Dept'+ELpntr+'C">';
var content5='<input size=9 name="Comm'+ELpntr+'D">';
var content6='<input size=9 name="Gty_Comm'+ELpntr+'E">';
var content7='<input size=9 name="Adv_Comm'+ELpntr+'F">';
var content8='<input size=9 name="PTO_Dollars'+ELpntr+'G">';
var content9='<input size=9 name="Gty_Comm'+ELpntr+'H">';


To alter the actual TD cell width

cell2 = document.createElement("TD");
cell2.width=150

That worked great!!! I one thing and all is well, this is a hard one though, I have been working on having the drop down list read from a SQL data base to give me all the employee that work for the company. I works on the first row but now the additional ones created by the Java Script. Any ideas?

<table border=1 cellpadding=0 cellspacing=0" width="800px" ID="OASales">
<SCRIPT Language="JavaScript">

var employees = new Array(
<%

set conntemp=server.createobject("adodb.connection")
conntemp.open DSNCompany

SQL="Select eepnamelast,eepnamefirst from (Emppers Inner Join Empcomp ON(empcomp.EecEmplStatus <>'T' AND emppers.eepeeid=empcomp.eeceeid)) order by eepnamelast"
set rstemp = conntemp.execute(SQL)
Do Until rstemp.EOF
%>

new Array( "<%=rstemp("eepnamelast")%>", "<%=rstemp("eepnamefirst")%>" ),

<%

rstemp.MoveNext


optSuffix = "</OPTION>" & vbNewLine
valPrefix = "<OPTION Value='"
valSuffix = "'>"

opts = rstemp.GetString( , , valSuffix, optSuffix & valPrefix)
opts = valPrefix & Left( opts, Len(opts)-Len(valPrefix) )

Loop

rstemp.Close
set rstemp=nothing
conntemp.Close
Set conntemp = nothing
%>

null
);

var ELpntr=1;
var content1='';
var content2='<input size=9 name="Reff_Bonus'+ELpntr+'A">';
var content3='<input size=9 name="Lead_Bonus'+ELpntr+'B">';
var content4='<input size=9 name="Chrg_Dept'+ELpntr+'C">';
var content5='<input size=9 name="Comm'+ELpntr+'D">';
var content6='<input size=9 name="Gty_Comm'+ELpntr+'E">';
var content7='<input size=9 name="Adv_Comm'+ELpntr+'F">';
var content8='<input size=9 name="PTO_Dollars'+ELpntr+'G">';
var content9='<input size=9 name="Gty_Comm'+ELpntr+'H">';

function addRow()
{
ELpntr++;

content1='<select name="SalesStaff'+ELpntr+'" onChange="addRow()">';
content1+='<option value"" selected>somehow the vbNewLine & opts & " needs to go here.........I think?</option>';

tb=document.createElement("TBODY");
document.getElementById("OASales").appendChild(tb);
row=document.createElement("TR");
cell1 = document.createElement("TD");
cell2 = document.createElement("TD");
cell3 = document.createElement("TD");
cell4 = document.createElement("TD");
cell5 = document.createElement("TD");
cell6 = document.createElement("TD");
cell7 = document.createElement("TD");
cell8 = document.createElement("TD");
cell9 = document.createElement("TD");
cell1.innerHTML=content1;
cell2.innerHTML=content2;
cell3.innerHTML=content3;
cell4.innerHTML=content4;
cell5.innerHTML=content5;
cell6.innerHTML=content6;
cell7.innerHTML=content7;
cell8.innerHTML=content8;
cell9.innerHTML=content9;
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tabBody=document.getElementsByTagName("TBODY").item(2);
tabBody.appendChild(row);
}


</script>

<td width=250>
<tr>
<%

Response.write "<td><select name=""SalesStaff"" onChange=""addRow()"">" & vbNewLine & opts & "</Select>"


%>

<td><font size=-1 ><input name="Reff_Bonus" size="9" value="<%=Reff_Bonus%>"></TD>
<td><font size=-1 ><input name="Lead_Bonus" size="9" value="<%=Lead_Bonus%>"></TD>
<td><font size=-1 ><input name="Chrg_Dept" size="9" value="<%=Chrg_Dept%>"></TD>
<td><font size=-1 ><input name="Comm" size="9" value="<%=Comm%>"></TD>
<td><font size=-1 ><input name="Gty_Comm" size="9" value="<%=Gty_Comm%>"></TD>
<td><font size=-1 ><input name="Adv_Comm" size="9" value="<%=Adv_Comm%>"></TD>
<td><font size=-1 ><input name="PTO_Dollars" size="9" value="<%=PTO_Dollars%>"></TD>
</TR>
</table>
</Div>

Unfortunately I have not yet learned SQL so I cannot help you with that problem.

I am only just getting the hang of DOM :D


Sorry

:(

I had a developer give me a hand with it today at work. All is working now. Thanks for all the help!!!

Dan