效果图:
代码:
<html> <head> <script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> function AddRecord() { var row = tlist.insertRow(tlist.rows.length-2); row.className='tit3'; var i = row.rowIndex; var col = row.insertCell(0); col.innerHTML = " <input type='text' name='Option' size=12 maxlength=12>"; col = row.insertCell(1); col.innerHTML = " <input type='text' name='Serial' size=32 maxlength=100>"; col = row.insertCell(2); col.innerHTML = " <input type='text' name='Number' size=7 maxlength=7 >"; col = row.insertCell(3); col.innerHTML = " <input type='text' name='LName' size=6 maxlength=6 >"; col = row.insertCell(4); col.innerHTML = " <input type='text' name='Position' size=4 maxlength=4>"; col = row.insertCell(5); col.innerHTML = " <input type='text' name='Amount' size=4 maxlength=4 value='0' onchange='chtotal(this);'>"; col = row.insertCell(6); col.innerHTML = " <input type='text' name='Price' size=4 maxlength=4 value='0' onchange='chtotal(this);'>"; col = row.insertCell(7); col.innerHTML = " <input type='text' name='Total' size=8 readonly value='0'>"; col = row.insertCell(8); col.innerHTML = " <input type='text' name='fremarks' size=20 maxlength=100>"; col = row.insertCell(9); col.innerHTML = " <input type='button' value='删除' name='del' onclick='delrecord(this);'>"; } function chtotal(e) { var obj=e.parentNode.parentNode; var id=parseInt(obj.rowIndex)-1; var Amount=document.getElementsByName("Amount")[id]; var Price=document.getElementsByName("Price")[id]; var Total=document.getElementsByName("Total")[id]; var delbutton=document.getElementsByName("del"); var znum= document.getElementById("znum"); var newzum=0; Total.value = Amount.value * Price.value; for(var j=0;j <delbutton.length;j++) { newzum+=parseFloat(document.getElementsByName("Total")[j].value); } znum.innerHTML =newzum; var znum= document.getElementById("zamount"); var newamount=0 for(var k=0;k <delbutton.length;k++) { newamount+=parseFloat(document.getElementsByName("Amount")[k].value); } zamount.innerHTML =newamount; } function delrecord(obj) { obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); var delbutton=document.getElementsByName("del"); var newzum=0; for(var j=0;j <delbutton.length;j++) { newzum+=parseFloat(document.getElementsByName("Total")[j].value); } znum.innerHTML =newzum; var newamount=0; for(var k=0;k <delbutton.length;k++) { newamount+=parseFloat(document.getElementsByName("Amount")[k].value); } zamount.innerHTML =newamount; } </script> </head> <body> <div id="d1"> <input type="button" value="创建" onclick="addTable()"> <input type="button" value="添加" onclick="AddRecord()"> <input type="button" value="删除" onclick="deleteRow()"> <input type="button" value="保存" onclick="saveTable()"> <input type="button" value="编辑" onclick="editTable()"> <input type="button" value="复制"> </div> <div id="d2"> <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> <tr class="tit2"> <td>选项</td> <td>序号 </td> <td>编号 </td><td>名称 </td><td>位置 </td><td>数量 </td> <td>单价 </td> <td>价格 </td><td>操作 </td> </tr> <tr class="tit3"> <td><input type="text" name="Option" size=12 maxlength=12> </td> <td><input type="text" name="Serial" size=32> </td> <td><input type="text" name="Number" size=7 maxlength=7 > </td> <td><input type="text" name="LName" size=6 maxlength=6 > </td> <td><input type="text" name="Position" size=4 maxlength=4> </td> <td><input type="text" name="Amount" size=4 maxlength=4 value='0' onchange='chtotal(this);'> </td> <td><input type="text" name="Price" size=4 maxlength=4 value='0' onchange='chtotal(this);'> </td> <td><input type="text" name="Total" size=8 readonly value='0'> </td> <td><input type="text" name="fremarks" size=20 maxlength=100> </td> <td><input type="button" value="删除" name='del' onclick="delrecord(this);"> </td> </tr> <tr class="tit3"> <td>统计栏 </td> <td colspan=4> </td> <td colspan=2 align='left'> <b id="zamount">0 </b> </td> <td colspan=1 align='left'> <b id="znum">0 </b> </td> <td colspan=2> </td> </tr> <tr class="tit2"> </tr> </table> </div> </body> </html>