shashankmoharana Posted November 20, 2005 Share Posted November 20, 2005 Hi I have created a table and an ADD button . When I clicked on the button one row will be added. That row having input boxes.That is done .But my problem is , how to get the value of input box in runtime .Means when the page is display and when I entered the values in the input box.Pls helpshashank Link to comment Share on other sites More sharing options...
hacknsack Posted November 23, 2005 Share Posted November 23, 2005 shashank, how to get the value of input box in runtimeWhen you add the row with the inputs, are you assigning names to the new inputs?Thanks, Link to comment Share on other sites More sharing options...
shashankmoharana Posted November 23, 2005 Author Share Posted November 23, 2005 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 More sharing options...
vijay Posted November 23, 2005 Share Posted November 23, 2005 Hi,What u want exactly From long Coding? Link to comment Share on other sites More sharing options...
Jonas Posted November 23, 2005 Share Posted November 23, 2005 <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 More sharing options...
hacknsack Posted November 23, 2005 Share Posted November 23, 2005 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 More sharing options...
hacknsack Posted November 25, 2005 Share Posted November 25, 2005 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now