I have a webpage that dynamically a

[mattpstanding]

I have a webpage that dynamically adds a new row and cells to a table. In that table I try to dynamically insert form elements (text box and option boxes) as an array and the plan is to pass that array to a db. I can add the rows and cells but I am not sure if I am creating the form elements correctly and am unable to reference values of those form objects inside the cells.
When I click on a button to add a row to the table the following is called:

 <td onclick="addrow(this)" background="../images/add.png" style="text-align: center; background-repeat:no-repeat;background-position: center;font-family: Calibri;"></td>

This calls:

function addrow(x)
{
	//alert("Row index is: " + x.parentNode.rowIndex);
	var table=document.getElementById("Timesheet_Table");
	var nextrow=table.insertRow(x.parentNode.rowIndex+1);
	var currentrow=table.insertRow(x.parentNode.rowIndex);
	var cell1=nextrow.insertCell(0);
	var cell2=nextrow.insertCell(1);
	var cell3=nextrow.insertCell(2);
	var cell4=nextrow.insertCell(3);
	var cell5=nextrow.insertCell(4);
	var cell6=nextrow.insertCell(5);
	var cell7=nextrow.insertCell(6);
	var cell8=nextrow.insertCell(7);
	var cell9=nextrow.insertCell(8);
	var temp;
	var joblistarray = new Array();
	var projectlistarray = new Array();
	
	cell1.style.font="normal 16px calibri,calibri";
	cell2.innerHTML="<input type='text' id='timesheetdate' style='background-color:rgb(43,43,43);color:rgb(255,0,0);'>";
	cell2.style.font="normal 16px calibri,calibri";
	cell2.align="center";
	temp = '<%=jobcodemerged%>';
	joblistarray=temp.split(",");
	temp="";
	for (var counter = 0; counter < joblistarray.length; counter++){temp=temp+"<option>"+joblistarray[counter]+"</option>"} 
	temp="<Select name='jobcode[]' style='background-color:rgb(43,43,43);color:rgb(255,0,0);'><option>Select job code..</option>"+temp+"</select>";
	cell3.innerHTML=temp;//job code
	cell3.align = "center";
	temp = '<%=projectlist%>'; 
	projectlistarray=temp.split(",");
	temp=""
	for (var counter = 0; counter < projectlistarray.length; counter++){temp=temp+"<option>"+projectlistarray[counter]+"</option>"} 
	temp="<Select name='projectlist[]' style='background-color:rgb(43,43,43);color:rgb(255,0,0);'><option>Select project..</option>"+temp+"</select>";
	cell5.innerHTML= temp;
	cell5.align="center";
	cell7.innerHTML="<Select name='hours[]' style='background-color:rgb(43,43,43);color:rgb(255,0,0);'><option>Hours..</option><option>0.5</option><option>1</option><option>1.5</option><option>2</option><option>2.5</option><option>3</option><option>3.5</option><option>4</option><option>4.5</option><option>5</option><option>5.5</option><option>6</option><option>6.5</option><option>7</option>		<option>7.5</option><option>8</option><option>8.5</option><option>9</option><option>9.5</option><option>10</option><option>10.5</option><option>11</option><option>11.5</option><option>12</option></Select>";//hours combo box
	cell7.align="center";
	cell8.style.background="rgb(43,43,43) url('../images/add.png') no-repeat center center"
	cell8.onclick=function(){addrow(this);};
	cell8.align="center";
	if (document.getElementById("Timesheet_Table").rows.length>2){
		cell9.style.background="rgb(43,43,43) url('../images/delete.png') no-repeat center center";
		cell9.onclick=function(){removerow(this);};
		cell9.align = "center";
	}
	projectlistarray=""
	jobcodearray=jobcodearray+table.rows[x.parentNode.rowIndex].cells[2].firstChild.data;
	projectlistarray=projectlistarray+table.rows[x.parentNode.rowIndex].cells[4].firstChild.data;
	var childLength;
	childLength=table.rows[x.parentNode.rowIndex].cells[4].childNodes.length;
	hoursarray=hoursarray+table.rows[x.parentNode.rowIndex].cells[6].firstChild.data;

	var localarray = document.test.elements['hours[]'];
	
	
	for(i=0;i<localarray.length;i++)
	
{
 alert(localarray[i].value);
}
	
	//alert(jobcodearray);
	//alert(projectlistarray);
	//alert(hoursarray);
}

Any suggestions would be a great help!

 

[vacunita]

Where exactly are you trying to reference them?

The only problem I can see, is that your textbox doesn't have a name, so won't be able to be accessed from your server side script.

cell2[COLOR=#990000].[/color]innerHTML[COLOR=#990000]=[/color][COLOR=#FF0000]"<input type='text' id='timesheetdate' style='background-color:rgb(43,43,43);color:rgb(255,0,0);'>"[/color][COLOR=#990000];[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech