php การเขียนหน้าเว็บ ให้กรอบข้อมูล คำนวณได้เหมือน Excel

<table style="border: none;font-size: 12px;color: #5b5b5b; width: 100%;margin: 0px -5px 0px 0;" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                      		<td rowspan="2" style="background: #d69a98;" width="7%" align="center"><label class="font_head"><strong>ลำดับ MC</strong></label></td>
                            <td rowspan="2" style="background: #d69a98;" width="16%" align="center"><label class="font_head"><strong>เครื่องที่ผลิต</strong></label></td>
                            <td rowspan="2" style="background: #d69a98;" width="5%" align="center"><label class="font_head"><strong>จำนวนCAP (ตัน)</strong></label></td>
                            <td colspan="3" style="background: #d69a98;" width="18%" align="center"><label class="font_head"><strong>เวลารง.หยุด</strong></label></td>
                            <td colspan="3" style="background: #d69a98;" width="18%" align="center"><label class="font_head"><strong>เวลาหยุดตามแผน</strong></label></td>
                            <td colspan="3" style="background: #d69a98;" width="18%" align="center"><label class="font_head"><strong>เวลาคลาดเคลื่อนจากความไม่พร้อมฯ</strong></label></td>
                            <td colspan="3" style="background: #d69a98;" width="18%" align="center"><label class="font_head"><strong>เวลาหยุดเครื่องจักรเสีย</strong></label></td>
                      </tr>
                      
                      <tr>
                      		<td width="6%" style="background: #f2b5b3;" align="center"><label class="font_head">plan (นาที)</label></td>
                            <td width="6%" style="background: #f3c1c0;"align="center"><label class="font_head">จริง (นาที)</label></td>
                            <td width="6%" style="background: #f3cfce;"align="center"><label class="font_head">หยุดเครื่อง (นาที)</label></td>
                            <td width="6%" style="background: #f2b5b3;"align="center"><label class="font_head">plan (นาที)</label></td>
                            <td width="6%" style="background: #f3c1c0;"align="center"><label class="font_head">จริง (นาที)</label></td>
                            <td width="6%" style="background: #f3cfce;"align="center"><label class="font_head">หยุดเครื่อง (นาที)</label></td>
                            <td width="6%" style="background: #f2b5b3;" align="center"><label class="font_head">plan (นาที)</label></td>
                            <td width="6%" style="background: #f3c1c0;" align="center"><label class="font_head">จริง (นาที)</label></td>
                            <td width="6%" style="background: #f3cfce;" align="center"><label class="font_head">หยุดเครื่อง (นาที)</label></td>
                            <td width="6%" style="background: #f2b5b3;" align="center"><label class="font_head">plan (นาที)</label></td>
                            <td width="6%" style="background: #f3c1c0;" align="center"><label class="font_head">จริง (นาที)</label></td>
                            <td width="6%" style="background: #f3cfce;" align="center"><label class="font_head">หยุดเครื่อง (นาที)</label></td>
                      </tr>
                          
							<?php
            
                            $strSQLMain = "SELECT * FROM machine  ORDER BY id_machine ASC";
                            $objQueryMain = mysql_query($strSQLMain);
							$i=1;
                            while ($objResultMain  = mysql_fetch_array($objQueryMain)){
                            
							echo "<tr>
									<td style='border: none;padding: 4px; background: #e0bdbc;'><label class='font_head'><strong>".$i."".$objResultMain['MC']."</strong></label></td>
               						<td style='border: none;padding: 4px; background: #e0bdbc;'><label class='font_head'><strong>".$objResultMain['machine']."</strong></label></td>
									<td style='border: none;padding: 4px; background: #e0bdbc;'><input type='text' class='form-control' name='CAP".$i."' id='CAP".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='A".$i."' id='A".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='B".$i."' id='B".$i."' value=''  style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='C".$i."' id='C".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='D".$i."' id='D".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='E".$i."' id='E".$i."' value=''style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='F".$i."' id='F".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='G".$i."' id='G".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='H".$i."' id='H".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='I".$i."' id='I".$i."' value=''onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='J".$i."' id='J".$i."' value='' onClick='calculate()'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='K".$i."' id='K".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='L".$i."' id='L".$i."' value='' onClick='calculate()'></td>
								  </tr>";
							
							
							$i++;
							}
							echo "<tr>
									<td style='border: none;padding: 4px; background: #e0bdbc;' colspan='2'><label class='font_head'><strong><center>SUM</center></strong></label></td>
									<td style='border: none;padding: 4px; background: #e0bdbc;'><input type='text' class='form-control' name='CAP".$i."' id='CAP".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='A".$i."' id='A".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='B".$i."' id='B".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='C".$i."' id='C".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='D".$i."' id='D".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='E".$i."' id='E".$i."' value=''  style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='F".$i."' id='F".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='G".$i."' id='G".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='H".$i."' id='H".$i."' value=''  style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='I".$i."' id='I".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f2b5b3;'><input type='text' class='form-control' name='J".$i."' id='J".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3c1c0;'><input type='text' class='form-control' name='K".$i."' id='K".$i."' value='' style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
									<td style='border: none;padding: 4px; background: #f3cfce;'><input type='text' class='form-control' name='L".$i."' id='L".$i."' value=''style='background-color:transparent; BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none;'></td>
								  </tr>";
							
							echo "<input type='HIDDEN' class='form-control' name='sum' id='sum' value='".$i."'>";
                            
                            ?>
                      </table> 



<script language="JavaScript">
            function calculate(thisChk){
			
			var b;
			var cap=0;
				for(var i=2;i<=document.frmMain.sum.value;i++) {
						
				
					b=i-1;
					cap=document.getElementById( "CAP"+b ).value;
					document.getElementById( "CAP"+i ).value=cap;
					document.getElementById( "A"+i ).value=document.getElementById( "A"+b ).value;
					document.getElementById( "D1" ).value=document.getElementById( "A13" ).value; 
					document.getElementById( "D"+i ).value=document.getElementById( "D"+b ).value;
					document.getElementById( "G1" ).value=document.getElementById( "D13" ).value; 
					document.getElementById( "G"+i ).value=document.getElementById( "G"+b ).value;
					
					document.getElementById( "J"+i ).value=document.getElementById( "J"+b ).value;
				
					                                              
 
				 }   
				  
            }
    </script>