Jump to content

getting values from dynamic added rows in table

shashankmoharana

By shashankmoharana
in JavaScript

 Share

Recommended Posts

shashankmoharana Newbie

shashankmoharana

Posted
  • Author
Posted

Hi here I attached my code . Pls have a look.here when i click on the ADD button , it added the rows into table .But my problem is :when entered some numbers in the input screen , the total should be displayed in the total row . That also working before adding the row.After added a row, when i entered the value in the newly added row is not totalling in the Total row .If u see the screen u might be understand ..Code :********************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css"><!--.style2 {	font-style: normal;	border: none;	font-size: 12px;	font-family: Verdana, Arial, Helvetica, sans-serif;	background-color: #C9D3E4;}.style7 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight: bold;	font-size: 14px;}.style11 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; }.style14 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }.style16 {		font-size: 10px;	font-weight: bold;}.style19 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px; }.style24 {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-weight: bold;	font-size: 12px;}.odd{	background-color: red;} .even{	background-color: gray;} --></style><input type="hidden" name="rowCount" value="6"><script language="javascript"> function addRow() { 	var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];	var row = document.createElement("TR"); 	/*//	var row = document.getElementsByTagName("TR"); 	for(i = 0; i < row.length; i++){           	alert("hiiii");		if(i % 2 == 0){        		row[i].className = "even";      	}else{        		row[i].className = "odd";      	}          	} */		var cell1=document.createElement("TD");  	var check=document.createElement("INPUT"); 	check.setAttribute("type","checkbox");	cell1.appendChild(check); 	row.appendChild(cell1);		var cell2=document.createElement("TD");  	var inp1=document.createElement("INPUT"); 	inp1.setAttribute("type","text");	inp1.setAttribute("value","enter");	inp1.setAttribute("size","12");	cell2.appendChild(inp1);	row.appendChild(cell2);		var cell3=document.createElement("TD"); 	var inp2=document.createElement("INPUT"); 	inp2.setAttribute("type","text");	inp2.setAttribute("value","enter");	inp2.setAttribute("size","12");	cell3.appendChild(inp2);	row.appendChild(cell3);		var cell4=document.createElement("TD"); 	var inp3=document.createElement("INPUT"); 	inp3.setAttribute("type","text");	inp3.setAttribute("value","enter");	inp3.setAttribute("size","18");	cell4.appendChild(inp3);	row.appendChild(cell4);	//Adding rows	/*		var cell = document.createElement("TD"); 		var inp =  document.createElement("INPUT"); 		inp.setAttribute("name","h");		inp.setAttribute("type","text");		inp.setAttribute("size","1");		inp.setAttribute("value","00");		inp.setAttribute("onBlur",add());		cell.appendChild(inp); 		row.appendChild(cell); 		*///alert(Number(document.form1.table1.value));			for (i = 0; i <= 13; i++){		var cell = document.createElement("TD"); 		var inp =  document.createElement("INPUT"); //		var h = "H"+7+i;		//alert("H"+(rowCount)+(i+1));		inp.setAttribute("name","H"+(rowCount.value)+(i+1));		inp.setAttribute("type","text");		inp.setAttribute("size","1");		var t="H"+(rowCount.value)+(i+1);		inp.setAttribute("onBlur","total()");		cell.appendChild(inp); 		row.appendChild(cell); 				}	for (i = 1; i <= 2; i++){		var j = 15;		var cell = document.createElement("TD"); 		var inp =  document.createElement("INPUT"); 		inp.setAttribute("name","H"+(rowCount.value)+(j));		var t="H"+(rowCount.value)+(j);		inp.setAttribute("type","text");		inp.setAttribute("size","2");		inp.setAttribute("onBlur","total()");				cell.appendChild(inp); 		row.appendChild(cell); 		j++;	}	tbody.appendChild(row); 	rowCount.value++;}   function total(){//vertically			document.form1.TH1.value = Number(document.form1.H11.value)+Number(document.form1.H21.value)+Number(document.form1.H31.value)+Number(document.form1.H41.value)+Number(document.form1.H51.value)+Number(document.form1.H61.value);	document.form1.TH2.value = Number(document.form1.H12.value)+Number(document.form1.H22.value)+Number(document.form1.H32.value)+Number(document.form1.H42.value)+Number(document.form1.H52.value)+Number(document.form1.H62.value);	document.form1.TH3.value = Number(document.form1.H13.value)+Number(document.form1.H23.value)+Number(document.form1.H33.value)+Number(document.form1.H43.value)+Number(document.form1.H53.value)+Number(document.form1.H63.value);	document.form1.TH4.value = Number(document.form1.H14.value)+Number(document.form1.H24.value)+Number(document.form1.H34.value)+Number(document.form1.H44.value)+Number(document.form1.H54.value)+Number(document.form1.H64.value);	document.form1.TH5.value = Number(document.form1.H15.value)+Number(document.form1.H25.value)+Number(document.form1.H35.value)+Number(document.form1.H45.value)+Number(document.form1.H55.value)+Number(document.form1.H65.value);	document.form1.TH6.value = Number(document.form1.H16.value)+Number(document.form1.H26.value)+Number(document.form1.H36.value)+Number(document.form1.H46.value)+Number(document.form1.H56.value)+Number(document.form1.H66.value);	document.form1.TH7.value = Number(document.form1.H17.value)+Number(document.form1.H27.value)+Number(document.form1.H37.value)+Number(document.form1.H47.value)+Number(document.form1.H57.value)+Number(document.form1.H67.value);	document.form1.TH8.value = Number(document.form1.TH1.value)+Number(document.form1.TH2.value)+Number(document.form1.TH3.value)+Number(document.form1.TH4.value)+Number(document.form1.TH5.value)+Number(document.form1.TH6.value);	document.form1.TM1.value = Number(document.form1.M11.value)+Number(document.form1.M21.value)+Number(document.form1.M31.value)+Number(document.form1.M41.value)+Number(document.form1.M51.value)+Number(document.form1.M61.value);	document.form1.TM2.value = Number(document.form1.M12.value)+Number(document.form1.M22.value)+Number(document.form1.M32.value)+Number(document.form1.M42.value)+Number(document.form1.M52.value)+Number(document.form1.M62.value);	document.form1.TM3.value = Number(document.form1.M13.value)+Number(document.form1.M23.value)+Number(document.form1.M33.value)+Number(document.form1.M43.value)+Number(document.form1.M53.value)+Number(document.form1.M63.value);	document.form1.TM4.value = Number(document.form1.M14.value)+Number(document.form1.M24.value)+Number(document.form1.M34.value)+Number(document.form1.M44.value)+Number(document.form1.M54.value)+Number(document.form1.M64.value);	document.form1.TM5.value = Number(document.form1.M15.value)+Number(document.form1.M25.value)+Number(document.form1.M35.value)+Number(document.form1.M45.value)+Number(document.form1.M55.value)+Number(document.form1.M65.value);	document.form1.TM6.value = Number(document.form1.M16.value)+Number(document.form1.M26.value)+Number(document.form1.M36.value)+Number(document.form1.M46.value)+Number(document.form1.M56.value)+Number(document.form1.M66.value);	document.form1.TM7.value = Number(document.form1.M17.value)+Number(document.form1.M27.value)+Number(document.form1.M37.value)+Number(document.form1.M47.value)+Number(document.form1.M57.value)+Number(document.form1.M67.value);	document.form1.TM8.value = Number(document.form1.TM1.value)+Number(document.form1.TM2.value)+Number(document.form1.TM3.value)+Number(document.form1.TM4.value)+Number(document.form1.TM5.value)+Number(document.form1.TM6.value);//horizontally		document.form1.H18.value = Number(document.form1.H11.value)+Number(document.form1.H12.value)+Number(document.form1.H13.value)+Number(document.form1.H14.value)+Number(document.form1.H15.value)+Number(document.form1.H16.value)+Number(document.form1.H17.value);	document.form1.H28.value = Number(document.form1.H21.value)+Number(document.form1.H22.value)+Number(document.form1.H23.value)+Number(document.form1.H24.value)+Number(document.form1.H25.value)+Number(document.form1.H26.value)+Number(document.form1.H27.value);	document.form1.H38.value = Number(document.form1.H31.value)+Number(document.form1.H32.value)+Number(document.form1.H33.value)+Number(document.form1.H34.value)+Number(document.form1.H35.value)+Number(document.form1.H36.value)+Number(document.form1.H37.value);	document.form1.H48.value = Number(document.form1.H41.value)+Number(document.form1.H42.value)+Number(document.form1.H43.value)+Number(document.form1.H44.value)+Number(document.form1.H45.value)+Number(document.form1.H46.value)+Number(document.form1.H47.value);	document.form1.H58.value = Number(document.form1.H51.value)+Number(document.form1.H52.value)+Number(document.form1.H53.value)+Number(document.form1.H54.value)+Number(document.form1.H55.value)+Number(document.form1.H56.value)+Number(document.form1.H57.value);	document.form1.H68.value = Number(document.form1.H61.value)+Number(document.form1.H62.value)+Number(document.form1.H63.value)+Number(document.form1.H64.value)+Number(document.form1.H65.value)+Number(document.form1.H66.value)+Number(document.form1.H67.value);			document.form1.M18.value = Number(document.form1.M11.value)+Number(document.form1.M12.value)+Number(document.form1.M13.value)+Number(document.form1.M14.value)+Number(document.form1.M15.value)+Number(document.form1.M16.value)+Number(document.form1.M17.value);	document.form1.M28.value = Number(document.form1.M21.value)+Number(document.form1.M22.value)+Number(document.form1.M23.value)+Number(document.form1.M24.value)+Number(document.form1.M25.value)+Number(document.form1.M26.value)+Number(document.form1.M27.value);	document.form1.M38.value = Number(document.form1.M31.value)+Number(document.form1.M32.value)+Number(document.form1.M33.value)+Number(document.form1.M34.value)+Number(document.form1.M35.value)+Number(document.form1.M36.value)+Number(document.form1.M37.value);	document.form1.M48.value = Number(document.form1.M41.value)+Number(document.form1.M42.value)+Number(document.form1.M43.value)+Number(document.form1.M44.value)+Number(document.form1.M45.value)+Number(document.form1.M46.value)+Number(document.form1.M47.value);	document.form1.M58.value = Number(document.form1.M51.value)+Number(document.form1.M52.value)+Number(document.form1.M53.value)+Number(document.form1.M54.value)+Number(document.form1.M55.value)+Number(document.form1.M56.value)+Number(document.form1.M57.value);	document.form1.M68.value = Number(document.form1.M61.value)+Number(document.form1.M62.value)+Number(document.form1.M63.value)+Number(document.form1.M64.value)+Number(document.form1.M65.value)+Number(document.form1.M66.value)+Number(document.form1.M67.value);							}function add(){		}</script> </head><form action="" method="get" name="form1"><body><table height="527" border="0">  <tr bgcolor="#B1D7ED">    <td height="25" bordercolor="#3168D5" bgcolor="#FFFFFF"><table width="964" border="0">      <tr>        <td align="center" bgcolor="#B1D7ED"><span class="style7">Costing Information</span></td>      </tr>    </table></td>  </tr>  <tr bgcolor="#B1D7ED">    <td height="21" bordercolor="#3168D5" bgcolor="#FFFFFF"><table width="963" border="0">      <tr>        <td width="957" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><span class="style24">Working Time </span></td>      </tr>    </table></td>  </tr>  <tr>    <td height="193" valign="top"><table width="962" border="0" id="table1">	<tbody>      <tr align="center" bgcolor="#B1D7ED">        <td width="22" rowspan="2" align="left"> </td>        <td width="106" rowspan="2" align="left"><span class="style11">Job Type </span></td>        <td width="125" rowspan="2" bgcolor="#B1D7ED"><p class="style14"><strong>  Cost Code </strong><span class="style16">Internal Order or Cost Centre</span></p>          </td>        <td width="194" rowspan="2" bgcolor="#B1D7ED"><span class="style14"><strong>Work Description / Location </strong></span></td>        <td colspan="2"><span class="style14"><strong>Sun</strong></span></td>        <td colspan="2"><span class="style14"><strong>Mon</strong></span></td>        <td colspan="2"><span class="style14"><strong>Tue</strong></span></td>        <td colspan="2"><span class="style14"><strong>Wed</strong></span></td>        <td colspan="2"><span class="style14"><strong>Thu</strong></span></td>        <td colspan="2"><span class="style14"><strong>Fri</strong></span></td>        <td colspan="2"><span class="style14"><strong>Sat</strong></span></td>        <td colspan="2"><span class="style14"><strong>Total</strong></span></td>      </tr>      <tr>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="24" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="25" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="24" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="26" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="24" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="23" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="24" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="25" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="24" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>        <td width="42" align="center" bgcolor="#B1D7ED"><span class="style19">H</span></td>        <td width="42" align="center" bgcolor="#B1D7ED"><span class="style19">M</span></td>      </tr>      <tr bgcolor="#E0E0E0">        <td><input type="checkbox" disabled=""></td>        <td><span class="style14">Deputise</span></td>        <td> </td>        <td><span class="style14">Deputing / Ofice work </span></td>        <td bgcolor="#E0E0E0"><input name="H11" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M11" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H12" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M12" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H13" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M13" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H14" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M14" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H15" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M15" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H16" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M16" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H17" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M17" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#E0E0E0"><input name="H18" type="text" size="2" ></td>        <td align="center" bgcolor="#E0E0E0"><input name="M18" type="text" size="2"></td>      </tr>      <tr bordercolor="#C9D3E4" bgcolor="#C9D3E4">        <td><input type="checkbox" disabled=""></td>        <td><span class="style14">Meeting</span></td>        <td> </td>        <td><span class="style14">Briefing / Meeting </span></td>        <td bgcolor="#C9D3E4"><input name="H21" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M21" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H22" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M22" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H23" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M23" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H24" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M24" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H25" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M25" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H26" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M26" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H27" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M27" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#C9D3E4"><input name="H28" type="text" size="2" ></td>        <td align="center" bgcolor="#C9D3E4"><input name="M28" type="text" size="2"></td>      </tr>      <tr bgcolor="#E0E0E0">        <td><input type="checkbox" disabled=""></td>        <td><span class="style14">Fuel</span></td>        <td> </td>        <td><span class="style14">Garage / Fuel time </span></td>        <td bgcolor="#E0E0E0"><input name="H31" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M31" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H32" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M32" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H33" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M33" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H34" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M34" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H35" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M35" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H36" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M36" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H37" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="M37" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#E0E0E0"><input name="H38" type="text" size="2" ></td>        <td align="center" bgcolor="#E0E0E0"><input name="M38" type="text" size="2"></td>      </tr>      <tr bgcolor="#C9D3E4">        <td><input type="checkbox" disabled=""></td>        <td><span class="style14">Depot</span></td>        <td> </td>        <td><span class="style14">Depot Time </span></td>        <td bgcolor="#C9D3E4"><input name="H41" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M41" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H42" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M42" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H43" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M43" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H44" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M44" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H45" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M45" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H46" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M46" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H47" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M47" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#C9D3E4"><input name="H48" type="text" size="2" ></td>        <td align="center" bgcolor="#C9D3E4"><input name="M48" type="text" size="2"></td>      </tr>      <tr bgcolor="#E0E0E0">        <td><input type="checkbox" disabled=""></td>        <td><span class="style14">Unprod</span></td>        <td> </td>        <td><span class="style14">Other Unproducive </span></td>        <td bgcolor="#E0E0E0"><input name="H51" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M51" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H52" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M52" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H53" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M53" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H54" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M54" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H55" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M55" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H56" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M56" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#E0E0E0"><input name="H57" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#E0E0E0"><input name="M57" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#E0E0E0"><input name="H58" type="text" size="2" ></td>        <td align="center" bgcolor="#E0E0E0"><input name="M58" type="text" size="2"></td>      </tr>      <tr bgcolor="#C9D3E4">        <td><input type="checkbox" ></td>        <td><span class="style14">Training</span></td>        <td bgcolor="#C9D3E4"> </td>        <td><span class="style14">Training</span></td>        <td bgcolor="#C9D3E4"><input name="H61" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="M61" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H62" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M62" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H63" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M63" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H64" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M64" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H65" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M65" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H66" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M66" type="text" size="1" onBlur="total()"></td>        <td bgcolor="#C9D3E4"><input name="H67" type="text" size="1" onBlur="total()" ></td>        <td bgcolor="#C9D3E4"><input name="M67" type="text" size="1" onBlur="total()"></td>        <td align="center" bgcolor="#C9D3E4"><input name="H68" type="text" size="2"  ></td>        <td align="center" bgcolor="#C9D3E4"><input name="M68" type="text" size="2"></td>      </tr>	  </tbody>    </table></td>  </tr>  <tr bgcolor="#ECE9D8">    <td height="30" valign="top" bgcolor="#FFFFFF"><table id="totalTable" width="965" border="0">      <tr bgcolor="#C9D3E4">        <td width="460" bgcolor="#C9D3E4"><span class="style11">Total Working Time </span></td>        <td width="26"><input name="TH1" type="text" size="1" ></td>        <td width="23"><input name="TM1" type="text" size="1"></td>        <td width="27"><input name="TH2" type="text" size="1"></td>        <td width="24"><input name="TM2" type="text" size="1"></td>        <td width="25"><input name="TH3" type="text" size="1"></td>        <td width="24"><input name="TM3" type="text" size="1"></td>        <td width="26"><input name="TH4" type="text" size="1"></td>        <td width="27"><input name="TM4" type="text" size="1"></td>        <td width="25"><input name="TH5" type="text" size="1"></td>        <td width="24"><input name="TM5" type="text" size="1"></td>        <td width="24"><input name="TH6" type="text" size="1"></td>        <td width="23"><input name="TM6" type="text" size="1"></td>        <td width="25"><input name="TH7" type="text" size="1"></td>        <td width="25"><input name="TM7" type="text" size="1"></td>        <td width="43" align="center"><input name="TH8" type="text" size="2"></td>        <td width="42" align="center"><input name="TM8" type="text" size="2"></td>      </tr>    </table></td>	  </tr>  <tr>    <td height="30" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><table width="959" border="0">      <tr>        <td width="839" bgcolor="#FFFFFF"> </td>        <td width="76" bgcolor="#FFFFFF"><input name="Add" type="button" class="style2" value="Add Row" onClick="addRow();"></td>        <td width="88" bgcolor="#FFFFFF"><input name="Delete" type="button" class="style2" value="Delete Row"></td>      </tr>    </table></td>  </tr>  <tr bgcolor="#ECE9D8">    <td height="22" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><table width="962" border="0">      <tr>        <td bordercolor="#FFFFFF" bgcolor="#FFFFFF"><span class="style24">Non-Working Time </span></td>      </tr>    </table></td>  </tr>  <tr bordercolor="#ECE9D8">    <td height="108" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><table width="961" border="0">      <tr bgcolor="#E0E0E0">        <td width="105"><span class="style14">Holiday</span></td>        <td width="98"><input type="text" size="10"></td>        <td width="151"><span class="style14">Holiday</span></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td align="center"><input name="" type="text" size="2"></td>        <td align="center"><input name="" type="text" size="2"></td>      </tr>      <tr bgcolor="#C9D3E4">        <td><span class="style14">Sick</span></td>        <td><input type="text" size="10"></td>        <td><span class="style14">Sick</span></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td bordercolor="#C9D3E4"><input name="" type="text" size="1"></td>        <td align="center" bgcolor="#E0E0E0"><input name="" type="text" size="2"></td>        <td align="center" bgcolor="#E0E0E0"><input name="" type="text" size="2"></td>      </tr>      <tr bgcolor="#E0E0E0">        <td><span class="style14">Rest</span></td>        <td><input type="text" size="10"></td>        <td><span class="style14">Rest Time </span></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td align="center"><input name="" type="text" size="2"></td>        <td align="center"><input name="" type="text" size="2"></td>      </tr>      <tr bgcolor="#C9D3E4">        <td><span class="style14">Otherabs</span></td>        <td><input type="text" size="10"></td>        <td><span class="style14">Other Paid Absence</span></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td><input name="" type="text" size="1"></td>        <td align="center" bgcolor="#E0E0E0"><input name="" type="text" size="2"></td>        <td align="center" bgcolor="#E0E0E0"><input name="" type="text" size="2"></td>      </tr>    </table></td>  </tr>  <tr>    <td height="21" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"> </td>  </tr>  <tr>    <td height="56" valign="top" bordercolor="#FFFFFF" bgcolor="#FFFFFF"><table width="964" border="0">      <tr bgcolor="#C9D3E4">        <td width="105">Payroll number </td>        <td width="253"><input type="text" maxlength="6"></td>        <td width="134">			Employee's Name   	      </td>        <td width="454"><input type="text" size="30" maxlength="20"></td>      </tr>      <tr align="center" valign="bottom" bordercolor="#FFFFFF" bgcolor="#FFFFFF">        <td height="45" colspan="4"><input name="Save" type="button" class="style2" value="Save">          <input name="Submit" type="submit" class="style2" value="Submit"></td>        </tr>    </table></td>  </tr></table></body></form></html>

********************Pls give me some solution regarding this .Thanks shashank

Link to comment
Share on other sites
Jonas Devoted Member

Jonas

Posted
Posted

<td bgcolor="#E0E0E0"><input name="H11" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M11" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H12" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M12" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H13" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M13" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H14" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M14" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H15" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M15" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H16" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M16" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="H17" type="text" size="1" onBlur="total()"></td><td bgcolor="#E0E0E0"><input name="M17" type="text" size="1" onBlur="total()"></td>Wow. You should consider moving some stuff over to css. If you one day want to change the bgcolor of your table cells, you're gonna have a nice job ahead of you if for some reason you can't use search and replace (like for example you have that same color somewhere else and would like to keep it there). You should rather put a class="" on your <td> tags, and use the following css:td.class_name {background-color: #E0E0E0;}Your files would become smaller and load faster. Saves bandwidth... :)

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

This is interesting, Jonas recommends using a class name, and I'm going to suggestusing id's for each input. These 2 ideas will cut your page down considerably.If you assign unique id's to each input e.g. R1C1....R8C13 then we can loop thru thedocument.getElementsByTagName() grab the value of the input then fill the totals.Unfortunately, I don't have much time to spend on the project this morning.If another member hasn't provided an example by this evening, I'll build one when I get home from work.Thanks,

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

This was an interesting project..I could not get the "onblur()" to work correctly(IE6) on the appended boxes, hence the use of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>  <meta http-equiv="content-type" content="text/html; charset=windows-1250">  <title></title>  <style type="text/css">  .hdr td { text-align: center; }  </style>  <script type="text/javascript">  var rowArray = new Array('R0','R1','R2','R3');  var colArray = new Array('C0','C1','C2','C3');  var rowSumArrayH = new Array('HSubR0','HSubR1','HSubR2','HSubR3');  var rowSumArrayM = new Array('MSubR0','MSubR1','MSubR2','MSubR3');  var colSumArray = new Array('TC0','TC1','TC2','TC3');  var rowCount = 4;    function addRow(){  var x = 0;  rowArray.push('R' + rowCount);  rowSumArrayH.push('HSubR' + rowCount);  rowSumArrayM.push('MSubR' + rowCount);  var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];    var row = document.createElement("TR");    for(var j = 0; j < colArray.length; j++) {      var cell=document.createElement("TD");      var inp1=document.createElement("INPUT");      inp1.setAttribute("type","text");      inp1.setAttribute("value","");      inp1.setAttribute("size","1");      inp1.setAttribute("id","R" + rowCount + "C" + x++);      cell.appendChild(inp1);      row.appendChild(cell);      }          for(var j = 0; j < 2; j++) {      var cell=document.createElement("TD");      var inp1=document.createElement("INPUT");      inp1.setAttribute("type","text");      inp1.setAttribute("value","");      inp1.setAttribute("size","1");      inp1.setAttribute("id", (j==0)? 'HSubR' + rowCount : 'MSubR' + rowCount);      cell.appendChild(inp1);      row.appendChild(cell);      }  tbody.appendChild(row);  rowCount++;  }    function ckSumVert(){  var form = document.forms['f1'];  var numInput = 0;    for(var i = 0; i < colSumArray.length; i++){    var temp = 0;        for(var k = 0; k < rowArray.length; k++){          if(numInput = parseInt(document.getElementById( rowArray[k] + colArray[i] ).value))          temp += numInput;        }      form.elements[colSumArray[i]].value = temp;      }  ckSumHorz();  }  function ckSumHorz(){  var form = document.forms['f1'];  var numInput = 0;    for(var i = 0; i < rowArray.length; i++){    var tempH = tempM = 0;        for(var k = 0; k < colArray.length; k++){          if(numInput = parseInt(document.getElementById( rowArray[i] + colArray[k] ).value)){            (k % 2 == 0)? tempH += numInput : tempM += numInput;           }        }      form.elements[rowSumArrayH[i]].value = tempH;      form.elements[rowSumArrayM[i]].value = tempM;      }  ckTotals();  }    function ckTotals(){  var form = document.forms['f1'];  var numInput = 0;  var tempH = tempM = 0;    for(var i = 0; i < rowSumArrayH.length; i++){      if(numInput = parseInt(document.getElementById( rowSumArrayH[i] ).value))        tempH += numInput;      if(numInput = parseInt(document.getElementById( rowSumArrayM[i] ).value))        tempM += numInput;    }  document.getElementById('HTotal').value = tempH;     document.getElementById('MTotal').value = tempM;     }       </script>  </head>  <body onKeyUp="ckSumVert()">  <form name="f1">    <table id='table1'>    <tbody>      <tr class='hdr'>        <td>H</td>        <td>M</td>        <td>H</td>        <td>M</td>        <td>H</td>        <td>M</td>      </tr>      <tr>        <td><input type='text' id='R0C0' size='1' /></td>        <td><input type='text' id='R0C1' size='1' /></td>        <td><input type='text' id='R0C2' size='1' /></td>        <td><input type='text' id='R0C3' size='1' /></td>        <td><input type='text' id='HSubR0' size='1' /></td>        <td><input type='text' id='MSubR0' size='1' /></td>      </tr>      <tr>        <td><input type='text' id='R1C0' size='1' /></td>        <td><input type='text' id='R1C1' size='1' /></td>        <td><input type='text' id='R1C2' size='1' /></td>        <td><input type='text' id='R1C3' size='1' /></td>        <td><input type='text' id='HSubR1' size='1' /></td>        <td><input type='text' id='MSubR1' size='1' /></td>      </tr>      <tr>        <td><input type='text' id='R2C0' size='1' /></td>        <td><input type='text' id='R2C1' size='1' /></td>        <td><input type='text' id='R2C2' size='1' /></td>        <td><input type='text' id='R2C3' size='1' /></td>        <td><input type='text' id='HSubR2' size='1' /></td>        <td><input type='text' id='MSubR2' size='1' /></td>      </tr>      <tr>        <td><input type='text' id='R3C0' size='1' /></td>        <td><input type='text' id='R3C1' size='1' /></td>        <td><input type='text' id='R3C2' size='1' /></td>        <td><input type='text' id='R3C3' size='1' /></td>        <td><input type='text' id='HSubR3' size='1' /></td>        <td><input type='text' id='MSubR3' size='1' /></td>      </tr>      </tbody>    </table>    <table>    <tbody>      <tr>        <td><input type='text' id='TC0' size='1' /></td>        <td><input type='text' id='TC1' size='1' /></td>        <td><input type='text' id='TC2' size='1' /></td>        <td><input type='text' id='TC3' size='1' /></td>        <td><input type='text' id='HTotal' size='1' /></td>        <td><input type='text' id='MTotal' size='1' /></td>    </tbody>    </table>    <input type="button" value="Add Row" onclick="addRow()">  </form>    </body></html>

If anyone finds a way to make the "onblur()" active(IE6) on the appended boxes I wouldappreciate it very much if you could post the solution.Thanks,

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...