高分求救对动态表格的计算问题,
表格见图
如图所示,在输入完每行的qty及price之后,自动计算乘积并填入到total中,即a=a1*a2
并且在填入total中之后自动更新amount的值,该值为total的和,即amount=a+b+c,
add是添加一行的意思,如果是四行,那就是amount=a+b+c+d
请高手指教这二个计算该如何写,下面是已知的表格动态添加部分的代码:
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+"' size=12 maxlength=12>";
col = row.insertCell(1);
col.innerHTML = "<input type='text' name='fdesc"+i+"' size=32 maxlength=100>";
col = row.insertCell(2);
col.innerHTML = "<input type='text' name='fqty"+i+"' size=7 maxlength=7 value='0' onchange='chtotal(i);'>";
col = row.insertCell(3);
col.innerHTML = "<input type='text' name='fprice"+i+"' size=6 maxlength=6 value='0' onchange='chtotal(i);'>";
col = row.insertCell(4);
col.innerHTML = "<input type='text' name='finners"+i+"' size=4 maxlength=4>";
col = row.insertCell(5);
col.innerHTML = "<input type='text' name='fouters"+i+"' size=4 maxlength=4>";
col = row.insertCell(6);
col.innerHTML = "<input type='text' name='ftotal"+i+"' size=8 readonly >";
col = row.insertCell(7);
col.innerHTML = "<input type='text' name='fremarks"+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设置为无效
}
[解决办法]
改了一下，这下完整了：
<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="fremarks1" name="fremarks1" 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='fremarks"+i+"' name='fremarks"+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>
[解决办法]
<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="fremarks1" id="fremarks1" 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='fremarks"+i+"' id='fremarks"+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>
[解决办法]
那是一个IE的BUG