高分求救对动态表格的计算问题,

Question

这里是表格的代码:    <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
    <tr class="tit2" align='center'>
    <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" align='center'>
    <td><input type="text" name="fno1" size=12 maxlength=12></td>
    <td><input type="text" name="fdesc1" size=32></td>
    <td><input type="text" name="fqty1" size=7 maxlength=7 value='0' onchange='chtotal();'></td>
    <td><input type="text" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal();'></td>
    <td><input type="text" name="finners1" size=4 maxlength=4></td>
    <td><input type="text" name="fouters1" size=4 maxlength=4></td>    
    <td><input type="text" name="ftotal1" size=8 readonly ></td>
    <td><input type="text" name="fres1" size=20 maxlength=100></td>
    <td><input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"></td>
    </tr>
    <tr class="tit3"><td>合计</td><td colspan=4></td><td colspan=2 align='right'><b>111</b></td><td colspan=2></td></tr>
    <tr class="tit2">
    <td colspan=9><input type="button" value="增加条目" onclick="AddRecord();"></td>
    </tr>
    </table>代码都在这里了.

Answer 1

帮你写了一下:     <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
    <tr class="tit2" align='center'>
    <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" align='center'>
    <td> <input type="text" id="fno1" name="fno1" size=12 maxlength=12> </td>
    <td> <input type="text" id="fdesc1" name="fdesc1" size=32> </td>
    <td> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='0' onchange='chtotal(1);'> </td>
    <td> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'> </td>
    <td> <input type="text" id="finners1" name="finners1" size=4 maxlength=4> </td>
    <td> <input type="text" id="fouters1" name="fouters1" size=4 maxlength=4> </td>   
    <td> <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
    <td> <input type="text" id="fres1" name="fres1" size=20 maxlength=100> </td>
    <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"> </td>
    </tr>
    <tr class="tit3"><td>合计</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>
    <tr class="tit2">
    <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td>
    </tr> <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' id='fno"+i+"' name='fno"+i+"' size=12 maxlength=12>";   
  col  =  row.insertCell(1);   
  col.innerHTML  =  " <input type='text' id='fdesc"+i+"' name='fdesc"+i+"' size=32 maxlength=100>";   
  col  =  row.insertCell(2);   
  col.innerHTML  =  " <input type='text' id='fqty"+i+"' name='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal(i);'>";   
  col  =  row.insertCell(3);   
  col.innerHTML  =  " <input type='text' id='fprice"+i+"' name='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal(i);'>";   
  col  =  row.insertCell(4);   
  col.innerHTML  =  " <input type='text' id='finners"+i+"' name='finners"+i+"' size=4 maxlength=4>";   
  col  =  row.insertCell(5);   
  col.innerHTML  =  " <input type='text' id='fouters"+i+"' name='fouters"+i+"' size=4 maxlength=4>";   
  col  =  row.insertCell(6);   
  col.innerHTML  =  " <input type='text' id='ftotal"+i+"' name='ftotal"+i+"' size=8 readonly >";   
  col  =  row.insertCell(7);   
  col.innerHTML  =  " <input type='text' id='fres"+i+"' name='fres"+i+"' size=20 maxlength=100>";
  col  =  row.insertCell(8);   
  col.innerHTML  =  " <input type='button' value='删除' id='delbutton"+i+"' onclick='delrecord(this);'>"; 
  document.getElementById('delButton'+(i-1)).disabled=true; //这里将上一个button设置为无效
}
function chtotal(id)
{
var q = document.getElementById("fqty"+id);
var p = document.getElementById("fprice"+id);
var t = document.getElementById("ftotal"+id);
var tt = document.getElementById("totalsum");
t.value = q.value * p.value;
tt.innerHTML = parseInt(tt.innerHTML, 10) + t.value;
}
</script>

Answer 2

改了一下，这下完整了：    <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">
    <tr class="tit2" align='center'>
    <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" align='center'>
    <td> <input type="text" id="fno1" name="fno1" size=12 maxlength=12> </td>
    <td> <input type="text" id="fdesc1" name="fdesc1" size=32> </td>
    <td> <input type="text" id="fqty1" name="fqty1" size=7 maxlength=7 value='0' onchange='chtotal(1);'> </td>
    <td> <input type="text" id="fprice1" name="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'> </td>
    <td> <input type="text" id="finners1" name="finners1" size=4 maxlength=4> </td>
    <td> <input type="text" id="fouters1" name="fouters1" size=4 maxlength=4> </td>   
    <td> <input type="text" id="ftotal1" name="ftotal1" size=8 readonly > </td>
    <td> <input type="text" id="fres1" name="fres1" size=20 maxlength=100> </td>
    <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"> </td>
    </tr>
    <tr class="tit3"><td>合计</td><td colspan=4></td><td colspan=2 align='right'><b id="totalsum">0</b></td><td colspan=2></td></tr>
    <tr class="tit2">
    <td colspan=9> <input type="button" value="增加条目" onclick="AddRecord();"> </td>
    </tr> <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' id='fno"+i+"' name='fno"+i+"' size=12 maxlength=12>";   
  col  =  row.insertCell(1);   
  col.innerHTML  =  " <input type='text' id='fdesc"+i+"' name='fdesc"+i+"' size=32 maxlength=100>";   
  col  =  row.insertCell(2);   
  col.innerHTML  =  " <input type='text' id='fqty"+i+"' name='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal("+i+");'>";   
  col  =  row.insertCell(3);   
  col.innerHTML  =  " <input type='text' id='fprice"+i+"' name='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal("+i+");'>";   
  col  =  row.insertCell(4);   
  col.innerHTML  =  " <input type='text' id='finners"+i+"' name='finners"+i+"' size=4 maxlength=4>";   
  col  =  row.insertCell(5);   
  col.innerHTML  =  " <input type='text' id='fouters"+i+"' name='fouters"+i+"' size=4 maxlength=4>";   
  col  =  row.insertCell(6);   
  col.innerHTML  =  " <input type='text' id='ftotal"+i+"' name='ftotal"+i+"' size=8 readonly >";   
  col  =  row.insertCell(7);   
  col.innerHTML  =  " <input type='text' id='fres"+i+"' name='fres"+i+"' size=20 maxlength=100>";
  col  =  row.insertCell(8);   
  col.innerHTML  =  " <input type='button' value='删除' id='delbutton"+i+"' onclick='delrecord(this);'>"; 
  document.getElementById('delbutton'+(i-1)).disabled=true; //这里将上一个button设置为无效
}
function chtotal(id)
{
var q = document.getElementById("fqty"+id);
var p = document.getElementById("fprice"+id);
var t = document.getElementById("ftotal"+id);
var tt = document.getElementById("totalsum");
t.value = q.value * p.value;
tt.innerHTML = parseInt(parseInt(tt.innerHTML) + parseInt(t.value));
}
</script>

Answer 3

<html> 
<head>
<script type="text/javascript">
window.onload=function(){
    //window.parent.location.href="http://www.5izd.com/";
}</script> 
</head> 
<body> 
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> 
    <tr class="tit2" align='center'> 
    <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" align='center'> 
    <td> <input type="text" name="fno1" id="fno1" size=12 maxlength=12> </td> 
    <td> <input type="text" name="fdesc1" id="fdesc1" size=32> </td> 
    <td> <input type="text" name="fqty1" id="fqty1" size=7 maxlength=7 value='0' onchange='chtotal(1);'> </td> 
    <td> <input type="text" name="fprice1" id="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'> </td> 
    <td> <input type="text" name="finners1" id="finners1" size=4 maxlength=4> </td> 
    <td> <input type="text" name="fouters1" id="fouters1" size=4 maxlength=4> </td>    
    <td> <input type="text" name="ftotal1" id="ftotal1" size=8 readonly > </td> 
    <td> <input type="text" name="fres1" id="fres1" size=20 maxlength=100> </td> 
    <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"><input type="hidden" name='del'></td> 
    </tr> 
    <tr class="tit3"> <td>合计 </td> <td colspan=4> </td> <td colspan=2 align='right'> <b  id="znum">111 </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"+i+"' id='fno"+i+"' size=12 maxlength=12>";    
  col  =  row.insertCell(1);    
  col.innerHTML  =  " <input type='text' name='fdesc"+i+"' id='fdesc"+i+"' size=32 maxlength=100>";    
  col  =  row.insertCell(2);    
  col.innerHTML  =  " <input type='text' name='fqty"+i+"' id='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal("+i+");'>";    
  col  =  row.insertCell(3);    
  col.innerHTML  =  " <input type='text' name='fprice"+i+"' id='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal("+i+");'>";    
  col  =  row.insertCell(4);    
  col.innerHTML  =  " <input type='text' name='finners"+i+"' id='finners"+i+"' size=4 maxlength=4>";    
  col  =  row.insertCell(5);    
  col.innerHTML  =  " <input type='text' name='fouters"+i+"' id='fouters"+i+"' size=4 maxlength=4>";    
  col  =  row.insertCell(6);    
  col.innerHTML  =  " <input type='text' name='ftotal"+i+"' id='ftotal"+i+"' size=8 readonly >";    
  col  =  row.insertCell(7);    
  col.innerHTML  =  " <input type='text' name='fres"+i+"' id='fres"+i+"' size=20 maxlength=100>"; 
  col  =  row.insertCell(8);    
  col.innerHTML  =  " <input type='button' name='delbutton' value='删除' id='delbutton"+i+"' onclick='delrecord(this);'><input type='hidden' name='del'>";  
  document.getElementById('delButton'+(i-1)).disabled=true; //这里将上一个button设置为无效 
}  
function chtotal(id) 
{ 
var fqty= document.getElementById("fqty"+id); 
var fprice= document.getElementById("fprice"+id); 
var ftotal= document.getElementById("ftotal"+id); 
var delbutton=document.getElementsByName("del");
var znum= document.getElementById("znum"); 
var newzum=0;
ftotal.value = fqty.value * fprice.value; 
for(var j=1;j<=delbutton.length;j++){
newzum+=parseInt(document.getElementById("ftotal"+j).value);
}
znum.innerHTML =newzum; 
} </script>
</body> 
</html> 

Answer 4

<html> 
<head>
<script type="text/javascript">
window.onload=function(){
    //window.parent.location.href="http://www.5izd.com/";
}</script> 
</head> 
<body> 
<table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist"> 
    <tr class="tit2" align='center'> 
    <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" align='center'> 
    <td> <input type="text" name="fno1" id="fno1" size=12 maxlength=12> </td> 
    <td> <input type="text" name="fdesc1" id="fdesc1" size=32> </td> 
    <td> <input type="text" name="fqty1" id="fqty1" size=7 maxlength=7 value='0' onchange='chtotal(1);'> </td> 
    <td> <input type="text" name="fprice1" id="fprice1" size=6 maxlength=6 value='0' onchange='chtotal(1);'> </td> 
    <td> <input type="text" name="finners1" id="finners1" size=4 maxlength=4> </td> 
    <td> <input type="text" name="fouters1" id="fouters1" size=4 maxlength=4> </td>    
    <td> <input type="text" name="ftotal1" id="ftotal1" size=8 readonly > </td> 
    <td> <input type="text" name="fres1" id="fres1" size=20 maxlength=100> </td> 
    <td> <input type="button" value="删除" id='delbutton1' onclick="delrecord(this);"><input type="hidden" name='del'></td> 
    </tr> 
    <tr class="tit3"> <td>合计 </td> <td colspan=4> </td> <td colspan=2 align='right'> <b  id="znum">111 </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"+i+"' id='fno"+i+"' size=12 maxlength=12>";    
  col  =  row.insertCell(1);    
  col.innerHTML  =  " <input type='text' name='fdesc"+i+"' id='fdesc"+i+"' size=32 maxlength=100>";    
  col  =  row.insertCell(2);    
  col.innerHTML  =  " <input type='text' name='fqty"+i+"' id='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal("+i+");'>";    
  col  =  row.insertCell(3);    
  col.innerHTML  =  " <input type='text' name='fprice"+i+"' id='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal("+i+");'>";    
  col  =  row.insertCell(4);    
  col.innerHTML  =  " <input type='text' name='finners"+i+"' id='finners"+i+"' size=4 maxlength=4>";    
  col  =  row.insertCell(5);    
  col.innerHTML  =  " <input type='text' name='fouters"+i+"' id='fouters"+i+"' size=4 maxlength=4>";    
  col  =  row.insertCell(6);    
  col.innerHTML  =  " <input type='text' name='ftotal"+i+"' id='ftotal"+i+"' size=8 readonly >";    
  col  =  row.insertCell(7);    
  col.innerHTML  =  " <input type='text' name='fres"+i+"' id='fres"+i+"' size=20 maxlength=100>"; 
  col  =  row.insertCell(8);    
  col.innerHTML  =  " <input type='button' name='delbutton' value='删除' id='delbutton"+i+"' onclick='delrecord(this);'><input type='hidden' name='del'>";  
  document.getElementById('delButton'+(i-1)).disabled=true; //这里将上一个button设置为无效 
}  
function chtotal(id) 
{ 
var fqty= document.getElementById("fqty"+id); 
var fprice= document.getElementById("fprice"+id); 
var ftotal= document.getElementById("ftotal"+id); 
var delbutton=document.getElementsByName("del");
var znum= document.getElementById("znum"); 
var newzum=0;
ftotal.value = fqty.value * fprice.value; 
for(var j=1;j<=delbutton.length;j++){
newzum+=parseInt(document.getElementById("ftotal"+j).value);
}
znum.innerHTML =newzum; 
} </script>
</body> 
</html> 

Answer 5

dengdajun发的这个与chinmo的没看出什么区别啊,另外,这二个代码还是有点问题, shagoo 的代码在只有一行的情况下如果进行修改,累加的值会自已与自已家. chinmo 的代码能否再简洁一点呢?如果不单独为每个单元格中的控件命名,还有其它的什么方法吗?

Answer 6

<input type='text' name='fdesc"+i+"' id='fdesc"+i+"' 我没设ID好像也能正常运行啊.