再问一个有关动态表格统计的问题

Question

啊,不好意思,没写清楚为了实现:
如图所示,在输入完每行的qty及price之后,自动计算乘积并填入到total中,即a=a1*a2 
并且在填入total中之后自动更新amount的值,该值为total的和,即amount=a+b+c, 
add是添加一行的意思,如果是四行,那就是amount=a+b+c+d 如果把某一行删除了,则重新计算amount

Answer 1

function chtotal(id) 
与
function delrecord(obj) 
是错误的,请高手指点

Answer 2

var obj=e.parentNode.parentNode; //当面的父级对象
var id=parseInt(obj.rowIndex);//当前行号
var fqty= document.getElementsByName("fqty")[1]; 
var fprice=document.getElementsByName("fprice")[1]; 
var ftotal=document.getElementsByName("ftotal")[id]; 
var delbutton=document.getElementsByName("del"); 
var znum= document.getElementById("znum"); 

Answer 3

大概得写一下：
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> 
    <tr class="tit2"> 
    <td>ITEM NO </td> <td>ITEM DESCRIPTION </td> <td>QTY </td> <td>PRICE </td> <td>INNER </td> <td>OUTER </td> <td>TOTAL </td> <td>REMARKS </td> <td>操作 </td> 
    </tr> 
    <tr class="tit3"> 
    <td><input type="text" name="fno" size=12 maxlength=12> </td> 
    <td><input type="text" name="fdesc" size=32> </td> 
    <td><input type="text" name="fqty" size=7 maxlength=7 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="fprice" size=6 maxlength=6 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="finners" size=4 maxlength=4> </td> 
    <td><input type="text" name="fouters" size=4 maxlength=4> </td>    
    <td><input type="text" name="ftotal" size=8 readonly value='0'> </td> 
    <td><input type="text" name="fres" 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='right'> <b id="znum">0 </b> </td> <td colspan=2> </td> </tr> 
    <tr class="tit2"> 
    <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td> 
    </tr> 
    </table> 
<script>  
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='fno' size=12 maxlength=12>";    
  col  =  row.insertCell(1);    
  col.innerHTML  =  " <input type='text' name='fdesc' size=32 maxlength=100>";    
  col  =  row.insertCell(2);    
  col.innerHTML  =  " <input type='text' name='fqty' size=7 maxlength=7 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(3);    
  col.innerHTML  =  " <input type='text' name='fprice' size=6 maxlength=6 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(4);    
  col.innerHTML  =  " <input type='text' name='finners' size=4 maxlength=4>";    
  col  =  row.insertCell(5);    
  col.innerHTML  =  " <input type='text' name='fouters' size=4 maxlength=4>";    
  col  =  row.insertCell(6);    
  col.innerHTML  =  " <input type='text' name='ftotal' size=8 readonly value='0'>";    
  col  =  row.insertCell(7);    
  col.innerHTML  =  " <input type='text' name='fres' size=20 maxlength=100>"; 
  col  =  row.insertCell(8);    
  col.innerHTML  =  " <input type='button' value='删除' name='del' onclick='delrecord(this);'>";  
}  function chtotal(e) 
{ var obj=e.parentNode.parentNode; //当前父级对象，是为了得到当前行号
var id=parseInt(obj.rowIndex);//当前行号
var fqty= document.getElementsByName("fqty")[id]; 
var fprice=document.getElementsByName("fprice")[id]; 
var ftotal=document.getElementsByName("ftotal")[id]; 
var delbutton=document.getElementsByName("del"); 
var znum= document.getElementById("znum"); 
var newzum=0; 
alert(id)
ftotal.value = fqty.value * fprice.value; 
for(var j=1;j <=delbutton.length;j++) 
{ 
  newzum+=parseFloat(document.getElementsByName("ftotal")[id].value); 
} 
znum.innerHTML =newzum; } function delrecord(obj) 
{ 
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
  var delbutton=document.getElementsByName("del"); 
  var newzum=0; 
  for(var j=1;j <=delbutton.length;j++) 
  { 
  newzum+=parseFloat(document.getElementById("ftotal"+j).value); 
  } 
  znum.innerHTML =newzum; 
} 
</script>如果不对，慢慢调一下
var obj=e.parentNode.parentNode; //当前父级对象，是为了得到当前行号
var id=parseInt(obj.rowIndex);//当前行号
就是利用这个得到当前行号

Answer 4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> 
    <tr class="tit2"> 
    <td>ITEM NO </td> <td>ITEM DESCRIPTION </td> <td>QTY </td> <td>PRICE </td> <td>INNER </td> <td>OUTER </td> <td>TOTAL </td> <td>REMARKS </td> <td>操作 </td> 
    </tr> 
    <tr class="tit3"> 
    <td><input type="text" name="fno" size=12 maxlength=12> </td> 
    <td><input type="text" name="fdesc" size=32> </td> 
    <td><input type="text" name="fqty" size=7 maxlength=7 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="fprice" size=6 maxlength=6 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="finners" size=4 maxlength=4> </td> 
    <td><input type="text" name="fouters" size=4 maxlength=4> </td>    
    <td><input type="text" name="ftotal" size=8 readonly value='0'> </td> 
    <td><input type="text" name="fres" 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='right'> <b id="znum">0 </b> </td> <td colspan=2> </td> </tr> 
    <tr class="tit2"> 
    <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td> 
    </tr> 
    </table> 
<script>  
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='fno' size=12 maxlength=12>";    
  col  =  row.insertCell(1);    
  col.innerHTML  =  " <input type='text' name='fdesc' size=32 maxlength=100>";    
  col  =  row.insertCell(2);    
  col.innerHTML  =  " <input type='text' name='fqty' size=7 maxlength=7 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(3);    
  col.innerHTML  =  " <input type='text' name='fprice' size=6 maxlength=6 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(4);    
  col.innerHTML  =  " <input type='text' name='finners' size=4 maxlength=4>";    
  col  =  row.insertCell(5);    
  col.innerHTML  =  " <input type='text' name='fouters' size=4 maxlength=4>";    
  col  =  row.insertCell(6);    
  col.innerHTML  =  " <input type='text' name='ftotal' size=8 readonly value='0'>";    
  col  =  row.insertCell(7);    
  col.innerHTML  =  " <input type='text' name='fres' size=20 maxlength=100>"; 
  col  =  row.insertCell(8);    
  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 fqty=document.getElementsByName("fqty")[id]; 
var fprice=document.getElementsByName("fprice")[id]; 
var ftotal=document.getElementsByName("ftotal")[id]; 
var delbutton=document.getElementsByName("del"); 
var znum= document.getElementById("znum"); 
var newzum=0; 
ftotal.value = fqty.value * fprice.value; 
for(var j=0;j <delbutton.length;j++) 
{ 
  newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
} 
znum.innerHTML =newzum; } function delrecord(obj) 
{ 
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
  var delbutton=document.getElementsByName("del"); 
  var newzum=0; 
  for(var j=1;j <=delbutton.length;j++) 
  { 
  newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
  } 
  znum.innerHTML =newzum; 
} 
</script>
</body>
</html>
这个是调试好的了

Answer 5

上面改漏一部分，就是删除那部分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("ftotal")[j].value); 
  } 
  znum.innerHTML =newzum; 
} 
这个也要改成这个

Answer 6

最后调试的结果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> 
    <tr class="tit2"> 
    <td>ITEM NO </td> <td>ITEM DESCRIPTION </td> <td>QTY </td> <td>PRICE </td> <td>INNER </td> <td>OUTER </td> <td>TOTAL </td> <td>REMARKS </td> <td>操作 </td> 
    </tr> 
    <tr class="tit3"> 
    <td><input type="text" name="fno" size=12 maxlength=12> </td> 
    <td><input type="text" name="fdesc" size=32> </td> 
    <td><input type="text" name="fqty" size=7 maxlength=7 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="fprice" size=6 maxlength=6 value='0' onchange='chtotal(this);'> </td> 
    <td><input type="text" name="finners" size=4 maxlength=4> </td> 
    <td><input type="text" name="fouters" size=4 maxlength=4> </td>    
    <td><input type="text" name="ftotal" size=8 readonly value='0'> </td> 
    <td><input type="text" name="fres" 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='right'> <b id="znum">0 </b> </td> <td colspan=2> </td> </tr> 
    <tr class="tit2"> 
    <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td> 
    </tr> 
    </table> 
<script>  
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='fno' size=12 maxlength=12>";    
  col  =  row.insertCell(1);    
  col.innerHTML  =  " <input type='text' name='fdesc' size=32 maxlength=100>";    
  col  =  row.insertCell(2);    
  col.innerHTML  =  " <input type='text' name='fqty' size=7 maxlength=7 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(3);    
  col.innerHTML  =  " <input type='text' name='fprice' size=6 maxlength=6 value='0' onchange='chtotal(this);'>";    
  col  =  row.insertCell(4);    
  col.innerHTML  =  " <input type='text' name='finners' size=4 maxlength=4>";    
  col  =  row.insertCell(5);    
  col.innerHTML  =  " <input type='text' name='fouters' size=4 maxlength=4>";    
  col  =  row.insertCell(6);    
  col.innerHTML  =  " <input type='text' name='ftotal' size=8 readonly value='0'>";    
  col  =  row.insertCell(7);    
  col.innerHTML  =  " <input type='text' name='fres' size=20 maxlength=100>"; 
  col  =  row.insertCell(8);    
  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;//这里用当前行号减1是因为下面的数组是从0开始的，而行号是从1开始的。
var fqty=document.getElementsByName("fqty")[id]; 
var fprice=document.getElementsByName("fprice")[id]; 
var ftotal=document.getElementsByName("ftotal")[id]; 
var delbutton=document.getElementsByName("del"); 
var znum= document.getElementById("znum"); 
var newzum=0; 
ftotal.value = fqty.value * fprice.value; 
for(var j=0;j <delbutton.length;j++) 
{ 
  newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
} 
znum.innerHTML =newzum; } 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("ftotal")[j].value); 
  } 
  znum.innerHTML =newzum; 
} 
</script>
</body>
</html>

Answer 7

无话可说,自已的水平就这么一点,向chinmo及支持我的同志致敬.

Answer 8

最后应该是这样:
function delrecord(obj) 
{ 
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); 
  var znum= document.getElementById("znum"); 
  var delbutton=document.getElementsByName("del"); 
  var newzum=0; 
  for(var j=0;j <delbutton.length;j++) 
  { 
    newzum+=parseFloat(document.getElementsByName("ftotal")[j].value); 
  } 
  znum.value =newzum; 
}