效果图：
代码：
<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>
