- <!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>JS计算每行的和与总和(QTY,PRICE,TOTAL,合计)</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' οnchange='chtotal(this);'> </td>
- <td><input type="text" name="fprice" size=6 maxlength=6 value='0' οnchange='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="fremarks" size=20 maxlength=100> </td>
- <td><input type="button" value="删除" name='del' οnclick="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="增加条目" οnclick="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' οnchange='chtotal(this);'>";
- col = row.insertCell(3);
- col.innerHTML = " <input type='text' name='fprice' size=6 maxlength=6 value='0' οnchange='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='fremarks' size=20 maxlength=100>";
- col = row.insertCell(8);
- col.innerHTML = " <input type='button' value='删除' name='del' οnclick='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=0;j <delbutton.length;j++)
- {
- newzum+=parseFloat(document.getElementsByName("ftotal")[j].value);
- }
- znum.innerHTML =newzum;
- }
- </script>
- </body>
- </html>