Dynamically Adding Rows - becomes misaligned

[sue0912]

Hi,

I found this tutorial (easycfm.com)on dynamically adding rows, which when I originally added the fields I wanted worked great until I added a drop down. When it is just basic text fields and I enter data, then click on the add another all the columns stay aligned. When the drop downs are there, I can add the first row correctly, but the second row and every row after that becomes misaligned...right where the drop down fields are....

I do not have a clue how to correct the allignment when the add another button is submitted...

any suggestions
Thanks
Sue

Code is below....

beginning of the code.....
<!--- Dynamically Add Rows To a Form --->

<!--- This was a part of a system I wrote to create a purchase order
that gives the user the ability to add multiple items to it --->

<!--- The user enters the data, clicks on the "Add Another" Button,
the page reloads, and a new row is added to the form and the previous data entered is kept intact --->


<!--- Checks to see if form.numba is defined and if it is, adds one to the amount. If its not, it sets it to 1.
This keeps track of how many lines the user has added --->
<cfif isdefined ("form.numba")>
<cfset getnumba = form.numba + 1>
<cfelse>
<cfset getnumba = 1>
</cfif>

<!--- If there is more than one record, it returns the cursor to the new row --->
<cfif getnumba GT 1>
<cfset focusonme = " document.all.osform.partno" & getnumba & ".focus();">
<cfelse>
<cfset focusonme = "document.all.osform.partno.focus();">
</cfif>

<cfoutput>
<!--- function dofocusthing essentially puts the cursor either on the original first row (if nothing has been entered) or if "Add Another" has been clicked and a new row created it returns it to the first field of the new row --->
<!--- fuction submitform submits the form --->
<!--- function getnutherline reloads the page with the information stored in it--->
<script type="text/javascript">
function dofocusthing(){
#focusonme#
}
function submitform(){
document.all.osform.action = '/intranet/projecttracking/partsaction2.cfm?ProjectID=#gettask.ProjectID#&TaskID=#gettask.TaskID#';
document.all.osform.submit();
}
function getnutherline(){
document.all.osform.action = '/intranet/projecttracking/partstaskdetails3_test.cfm?ProjectID=#gettask.ProjectID#&TaskID=#gettask.TaskID#';
document.all.osform.submit();
}
</script>
</cfoutput>

form...

<table rules="none" align="center">
<tr>

<td class="five" class="Text1-Bold">Date</td>
<td class="five" class="Text1-Bold">Item Number</td>
<td class="five" class="Text1-Bold">Description</td>
<td class="five" class="Text1-Bold">Qty</td>
<td class="five" class="Text1-Bold">Tracking Number</td>
<td class="five" class="Text1-Bold">Ship To</td>
<td class="five" class="Text1-Bold">Ship Via</td>
<!---<td class="five" class="Text1-Bold">Task Type </td>--->
<!---<td class="five" class="Text1-Bold">Billable</td>--->
<td class="five" class="Text1-Bold">Verified on Site</td>
<td class="five" class="Text1-Bold">Used On Site</td>
<td class="five" class="Text1-Bold">Returned</td>
<td class="five" class="Text1-Bold">Picked Up</td>
<td class="five" class="Text1-Bold">Container</td>
<td class="five" class="Text1-Bold">Comments</td>
<td class="five" class="Text1-Bold">Status</td>
</tr>
<cfoutput>
<!--- Gets the value of getnumba from above --->
<input type="hidden" name="numba" value="#getnumba#">
<!--- Loop Through from 1 to the number above --->
<cfloop from="1" to="#getnumba#" index="idx">
<!--- At first, it displays the original one row form --->
<!--- User enters the data and hits "Add Another" --->
<!--- The page reloads with the data already entered and creates a new blank row that is ready for data entry --->
<tr>
<cfset dateordered = #CreateODBCDateTime(Now())#>
<cfif isdefined ("dateordered#idx#")>
<Td class="two"><cfinput name="dateordered#idx#" type="text" value="#evaluate("dateordered#idx#")#" class="TextInput" size="10" maxlength="15"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="dateordered#idx#" value="#DateFormat(dateordered, "mm/dd/yy")#" class="TextInput" size="10" maxlength="15"></TD>
</cfif>
<cfif isdefined ("form.partname#idx#")>
<Td><cfinput type="text" name="partname#idx#" value="#evaluate("form.partname#idx#")#" class="TextInput" required="yes" message="Please enter an Item Number"></TD>
<cfelse>
<Td><cfinput type="text" name="partname#idx#" class="TextInput" required="yes" message="Please enter an Item Number"></TD>
</cfif>
<cfif isdefined ("form.partdescription#idx#")>
<Td><cfinput type="text" name="partdescription#idx#" value="#evaluate("form.partdescription#idx#")#" class="TextInput" required="yes" message="Please enter a description" size="25"></TD>
<cfelse>
<Td><cfinput type="text" name="partdescription#idx#" class="TextInput" required="yes" message="Please enter a description"></TD>
</cfif>
<cfif isdefined ("form.qty#idx#")>
<Td><cfinput type="text" name="qty#idx#" value="#evaluate("form.qty#idx#")#" class="TextInput" required="yes" message="Please enter a qty" size="3" maxlength="5"></TD>
<cfelse>
<Td><cfinput type="text" name="qty#idx#" class="TextInput" required="yes" message="Please enter a qty" size="3" maxlength="5"></TD>
</cfif>
<cfif isdefined ("form.tracking_number#idx#")>
<Td class="two"><cfinput type="text" name="tracking_number#idx#" value="#evaluate("form.tracking_number#idx#")#" class="TextInput" size="10" maxlength="10"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="tracking_number#idx#" class="TextInput" size="10" maxlength="10"></TD>
</cfif>
<cfif isdefined ("form.partshipto#idx#")>
<Td class="two"><cfinput type="text" name="partshipto#idx#" value="#evaluate("form.partshipto#idx#")#" class="TextInput"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="partshipto#idx#" class="TextInput"></TD>
</cfif>
<cfif isdefined ("form.shipvia#idx#")>
<Td class="two"><cfinput type="text" name="shipvia#idx#" value="#evaluate("form.shipvia#idx#")#" class="TextInput"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="shipvia#idx#" class="TextInput"></TD>
</cfif>
<!---<cfset preselectListValue = "" />
<cfif isdefined ("form.tasktype#idx#")>
<td class="two"><cfset preselectListValue = form["taskType"& idx]></td>
</cfif>
<td class="two"><cfselect name="tasktype#idx#" query="tasktype"
value="tasktype"
selected="#preselectListValue#"
display="tasktype" class="TextInput"/></td>
<cfset preselectListValue = "" />
<cfif isdefined ("form.jobtype#idx#")>
<td class="two"><cfset preselectListValue = form["jobType"& idx]></td>
</cfif>
<td class="two"><cfselect name="jobtype#idx#" query="jobtypes"
value="jobtypevalue"
selected="#preselectListValue#"
display="jobtype" class="TextInput"/></td>--->
<cfif isdefined ("form.verified_on_site#idx#")>
<Td><cfinput type="text" name="verified_on_site#idx#" value="#evaluate("form.verified_on_site#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td><cfinput type="text" name="verified_on_site#idx#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("form.used_on_site#idx#")>
<Td><cfinput type="text" name="used_on_site#idx#" value="#evaluate("form.used_on_site#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td><cfinput type="text" name="used_on_site#idx#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("form.returned#idx#")>
<Td><cfinput type="text" name="returned#idx#" value="#evaluate("form.returned#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td><cfinput type="text" name="returned#idx#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("form.pickedup#idx#")>
<Td><cfinput type="text" name="pickedup#idx#" value="#evaluate("form.pickedup#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td><cfinput type="text" name="pickedup#idx#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("form.container#idx#")>
<Td class="two"><cfinput type="text" name="container#idx#" value="#evaluate("form.container#idx#")#" class="TextInput" size="5" maxlength="5"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="container#idx#" class="TextInput" size="5" maxlength="5"></TD>
</cfif>
<cfif isdefined ("form.comments#idx#")>
<Td class="two"><cfinput type="text" name="comments#idx#" value="#evaluate("form.comments#idx#")#" class="TextInput"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="comments#idx#" class="TextInput"></TD>
</cfif>
<cfset preselectListValue = "" />
<cfif isdefined ("form.status#idx#")>
<td class="two"><cfset preselectListValue = form["status"& idx]></td>
</cfif>
<td class="two"><cfselect name="status#idx#" query="status"
value="status"
selected="#preselectListValue#"
display="status" class="TextInput"/></td>

<!---<cfif isdefined ("form.status#idx#")>
<Td class="two"><cfinput type="text" name="status#idx#" value="#evaluate("form.status#idx#")#" size="5" maxlength="5"></TD>
<cfelse>
<Td class="two"><cfinput type="text" name="status#idx#" size="5" maxlength="5"></TD>
</cfif>--->
<cfset Date = #CreateODBCDateTime(Now())#>
<cfif isdefined ("date#idx#")>
<Td class="two"><cfinput name="date#idx#" type="hidden" value="#evaluate("date#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td class="two"><cfinput type="hidden" name="date#idx#" value="#date#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("projectid#idx#")>
<Td class="two"><cfinput name="projectid#idx#" type="hidden" value="#evaluate("projectid#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td class="two"><cfinput type="hidden" name="projectid#idx#" value="#projectid#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
<cfif isdefined ("taskid#idx#")>
<Td class="two"><cfinput name="taskid#idx#" type="hidden" value="#evaluate("taskid#idx#")#" class="TextInput" size="3" maxlength="3"></TD>
<cfelse>
<Td class="two"><cfinput type="hidden" name="taskid#idx#" value="#taskid#" class="TextInput" size="3" maxlength="3"></TD>
</cfif>
</tr>
</cfloop>
</cfoutput>
<tr>
<td class="two" colspan="8"><input type="button" name="add" value="Add Another" onClick="javascript:getnutherline();" Class="FormButton"></td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><input type="submit" name="submitformresult" value="Submit Form" Class="FormButton"></td>
</tr>
</table>
</cfform>