添加行后,再删除行,就不能自动计算金额了,还有最下面的合计,麻烦那位高手帮帮我
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
//动态表单开始
var i= 0;
var a = 1;
function insertRow(){
var newTR=myTable.insertRow(myTable.rows.length);
//添加列:货号
var HH=newTR.insertCell(0);
//添加列内容
HH.innerHTML = "<input name='txtName" + a + "' id='txtName" + a + "' type='text' size='12' style='width:100%' class='inputfield2'/>";
//添加列:品名
var PM=newTR.insertCell(1);
//添加列内容
PM.innerHTML = "<input name='txtEMail" + a + "' id='txtEmail" + a + "' type='text' size='12' style='width:100%' class='inputfield2'/>";
//添加列:数量
var HJ=newTR.insertCell(2);
//添加列内容
HJ.innerHTML = "<input name='HJ" + a + "' id='HJ" + a + "' type='text' size='3' style='width:100%' style='width:100%' class='inputfield2' onkeyup='add()'/>";
//添加列:单价
var DJ=newTR.insertCell(3);
//添加列内容
DJ.innerHTML = "<input name='DJ" + a + "' id='DJ" + a + "' type='text' size='8' style='width:100%' class='inputfield2' onkeyup='add()'/>";
//添加列:应收金额
var YSJE=newTR.insertCell(4);
//添加列内容
YSJE.innerHTML = "<input name='YSJE" + a + "' id='YSJE" + a + "' type='text' size='8' style='width:100%' class='inputfield2' onClick='add()' readonly/>";
//添加列:折扣
var ZK=newTR.insertCell(5);
//添加列内容
ZK.innerHTML = "<input name='ZK" + a + "' id='ZK" + a + "' type='text' size='4' style='width:100%' class='inputfield2' onkeyup='add()' value='1'/>";
//添加列:实收金额
var SSJE=newTR.insertCell(6);
//添加列内容
SSJE.innerHTML = "<input name='SSJE" + a + "' id='SSJE" + a + "' type='text' size='8' style='width:100%' class='inputfield2' onClick='add()' readonly/>";
//添加列:备注
var BZ=newTR.insertCell(7);
//添加列内容
BZ.innerHTML = "<input name='txtCompany" + a + "' id='txtCompany" + a + "' type='text' size='15' style='width:100%' class='inputfield2'/>";
//添加列:删除按钮
var newDeleteTD=newTR.insertCell(8);
//添加列内容
newDeleteTD.innerHTML = "<input type=button name='del'+a+'' value=删除 onclick=myTable.deleteRow(event.srcElement.parentElement.parentElement.rowIndex)>";
i++;
a++;
}
function deleteRow()
{
tr=document.getElementById("myTable").rows;
if(tr.length>1)tr[tr.length-1].removeNode();
}
//动态表单结束
//表单行计算
function add(){
var num1=0;
var num2=0;
var num3=1;
var num4=0;
for (var j=1;j<=myTable.rows.length;j++) {
if(document.all["HJ"+ j +""].value!="") {
num1=parseFloat(document.all["HJ"+ j +""].value);
if(document.all["DJ"+ j +""].value!="") {
num2=parseFloat(document.all["DJ"+ j +""].value);
document.all["YSJE"+ j +""].value=num1*num2;
if(document.all["ZK"+ j +""].value!="") {
num3=parseFloat(document.all["ZK"+ j +""].value);
if(document.all["YSJE"+ j +""].value!="") {
num4=parseFloat(document.all["YSJE"+ j +""].value);
document.all["SSJE"+ j +""].value=num3*num4;
}
}
}
}
}
}
</script>
<style type="text/css">
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
table, td, a {
color: #000;
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}
.td
{
nowrap:'true';
}
div.tableContainer {
clear: both;
border: 1px solid #666;
height: 100%;
overflow: auto;
width: 100%;
}
/* WinIE 6.x needs to re-account for it's scrollbar. Give it some padding */
\html div.tableContainer/* */ {
padding: 0 0 0 0
}
/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer {
height: auto;
padding: 0;
width: 100%
}
/* Reset overflow value to hidden for all non-IE browsers. */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer {
height: 100%;
overflow: hidden;
width: 100%;
}
/* define width of table. IE browsers only */
/* if width is set to 100%, you can remove the width */
/* property from div.tableContainer and have the div scale */
div.tableContainer table {
float: left;
width: 100%;
}
/* WinIE 6.x needs to re-account for padding. Give it a negative margin */
\html div.tableContainer table/* */ {
margin: 0 0 0 0
}
/* define width of table. Opera 5.x/6.x and MacIE 5.x */
html>body div.tableContainer table {
float: none;
margin: 0;
width: 100%;
}
/* define width of table. Add 16px to width for scrollbar. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body div[class].tableContainer table {
width:100%;
}
/* set table header to a fixed position. WinIE 6.x only */
/* In WinIE 6.x, any element with a position property set to relative and is a child of */
/* an element that has an overflow property set, the relative value translates into fixed. */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
position: relative;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
/* set THEAD element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body thead[class].fixedHeader tr {
display: block
}
/* make the TH elements pretty */
thead.fixedHeader th {
background: #D4D0C8;
border-left: 1px solid #fff;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
border-top: 1px solid #fff;
font-weight: normal;
padding: 2px 2px;
text-align: center
}
/* make the A elements pretty. makes for nice clickable headers */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
color: #FFF;
display: block;
text-decoration: none;
width: 100%;
}
/* make the A elements pretty. makes for nice clickable headers */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */
thead.fixedHeader a:hover {
color: #FFF;
display: block;
text-decoration: underline;
width: 100%;
}
/* define the table content to be scrollable */
/* set TBODY element to have block level attributes. All other non-IE browsers */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto */
/* Filter out Opera 5.x/6.x and MacIE 5.x */
head:first-child+body tbody[class].scrollContent {
display: block;
height: 100%;
overflow: auto;
width: 100%;
}
/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/ */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
border-bottom: 1px solid #CCC;
border-left: 1px solid #fff;
border-right: 1px solid #ccc;
border-top: 1px solid #fff;
padding: 2px 3px;
}
tbody.scrollContent tr{
background-color:expression((this.rowIndex%2==0)?"#FFFFFF":"#FFFFFF");
}
tbody.scrollContent tr.alternateRow td {
background: #EEE;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 0px 0px;
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body thead[class].fixedHeader th {
width: 200px;
}
head:first-child+body thead[class].fixedHeader th + th {
width: 250px;
}
head:first-child+body thead[class].fixedHeader th + th + th {
border-right: none;
padding: 4px 4px 4px 3px;
width: 316px;
}
#tableContainer .scrollTable .fixedHeader td {
}
/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */
/* Add 16px to last TH for scrollbar padding */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
head:first-child+body tbody[class].scrollContent td {
width: 200px;
}
head:first-child+body tbody[class].scrollContent td + td {
width: 250px;
}
head:first-child+body tbody[class].scrollContent td + td + td {
border-right: none;
padding: 2px 4px 2px 3px;
width: 300px;
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */
top: expression(document.getElementById("tableContainer").scrollTop)
}
.inputfield{
border:1px solid #999; background-color:#FFFFFF;
}
.inputfield2{
border:1px solid #FFF; background-color:#FFF;
}
.inputfieldtd{
background-color:#E6F0F0;
}
.inputfieldtd2{
background-color:#FFFFFF;
}
</style>
</HEAD>
<BODY>
<form method="POST" name="ck" action="jxc_sfkbdc.asp?sfkbz=2">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td>
<fieldset>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#D4D0C8">
<tr>
<td height="30" colspan="2"><div align="left"><span class="STYLE2"> </span><span class="STYLE5"><span class="STYLE2 STYLE3">销售单</span></span></div></td>
<td height="30"><div align="right"><span style="width:100%">录单时间:</span></div></td>
<td width="960" height="30"><input name="textfield" type="text" class="inputfield" style="width:60%" size="15" readonly="true"></td>
<td height="30"><div align="right"><span style="width:100%">单据编号:</span></div></td>
<td height="30"><input name="textfield4" type="text" class="inputfield" style="width:60%" size="15"></td>
</tr>
<tr>
<td width="176" height="30"><div align="right">客户单位:</div></td>
<td width="377" height="30"><a href="http://127.0.0.1">
<input name="textfield3" type="text" class="inputfield" style="width:80%" size="25" readonly="true">
</a></td>
<td width="294" height="30"><div align="right">地址:</div></td>
<td height="30"><input name="textfield5" type="text" class="inputfield" style="width:80%" size="25"></td>
<td width="321" height="30"><div align="right">电话:</div></td>
<td width="688" height="30"><input name="textfield7" type="text" class="inputfield" style="width:60%" size="15"></td>
</tr>
<tr>
<td width="176" height="30"><div align="right"><span style="width:100%">经手人:</span></div></td>
<td width="377" height="30"><input name="textfield62" type="text" class="inputfield" style="width:80%" size="25"></td>
<td width="294" height="30"><div align="right">发货仓库:</div></td>
<td height="30" colspan="3"><input name="textfield2" type="text" class="inputfield" size="25" readonly="true"></td>
</tr>
</table>
</fieldset> </td>
</tr>
<tr>
<td height="100%" valign="top" bgcolor="#FFFFFF">
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" class="scrollTable" id="myTable">
<thead class="fixedHeader">
<tr>
<th width="11%">商品编号</th>
<th width="11%">商品名称</th>
<th width="5%">数量</th>
<th width="6%">单价</th>
<th width="8%">应收金额</th>
<th width="4%">折扣</th>
<th width="9%">实收金额</th>
<th width="10%">备注</th>
<th width="4%"> </th>
</tr>
</thead>
<tbody class="scrollContent">
</tbody>
</table>
</div></td>
</tr>
<tr>
<td height="50" bgcolor="#E4F4F8">
<fieldset>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#D4D0C8">
<tr>
<td height="20" colspan="8"><div align="center"><a href="#" onClick="insertRow()">增加行</a></div></td>
</tr>
<tr>
<td height="20" colspan="8"><div align="right">合计数量:
<input name="HJSL" type="text" class="inputfieldtd" id="HJSL" size="10" readonly>
合计金额:
<input name="HJJE" type="text" class="inputfieldtd" id="HJJE" size="10" readonly>
折前金额:
<input name="ZQJE" type="text" class="inputfieldtd" id="ZQJE" size="10" readonly>
</div></td>
</tr>
<tr>
<td width="104" height="20"><div align="right">收款方式:</div></td>
<td width="175" height="20"><input name="textfield33" type="text" class="inputfield" style="width:60%" size="25"></td>
<td width="112" height="20"><div align="right">实收金额:</div></td>
<td width="183" height="20"><input name="textfield32" type="text" class="inputfield" style="width:60%" size="25"></td>
<td width="104" height="20">优惠金额:</td>
<td width="183" height="20"><input name="textfield34" type="text" class="inputfield" style="width:60%" size="25"></td>
<td width="179" height="20"> </td>
<td width="188" height="20"> </td>
</tr>
<tr>
<td height="20" colspan="8"><div align="right">单据过账 存入草稿 放弃退出</div></td>
</tr>
</table>
</fieldset> </td>
</tr>
</table>
</form>
</BODY>
</HTML>