JS计算每行的和与总和（QTY，PRICE，TOTAL，合计）

悠悠 2022-08-24 04:14 107阅读 0赞

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
2.  <html xmlns="http://www.w3.org/1999/xhtml"> 
3.  <head> 
4.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5.  <title>JS计算每行的和与总和（QTY，PRICE，TOTAL，合计）</title> 
6.  </head> 
7.  
8.  <body> 
9.  <table width="760" border="0" cellspacing="1" cellpadding="0" class="tb" id="tlist">  
10.     <tr class="tit2">  
11.     <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>  
12.     </tr>  
13.     <tr class="tit3">  
14.     <td><input type="text" name="fno" size=12 maxlength=12> </td>  
15.     <td><input type="text" name="fdesc" size=32> </td>  
16.     <td><input type="text" name="fqty" size=7 maxlength=7 value='0' οnchange='chtotal(this);'> </td>  
17.     <td><input type="text" name="fprice" size=6 maxlength=6 value='0' οnchange='chtotal(this);'> </td>  
18.     <td><input type="text" name="finners" size=4 maxlength=4> </td>  
19.     <td><input type="text" name="fouters" size=4 maxlength=4> </td>     
20.     <td><input type="text" name="ftotal" size=8 readonly value='0'> </td>  
21.     <td><input type="text" name="fremarks" size=20 maxlength=100> </td>  
22.     <td><input type="button" value="删除" name='del' οnclick="delrecord(this);"> </td>  
23.     </tr>  
24.     <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>  
25.     <tr class="tit2">  
26.     <td colspan=9> <input type="button" value="增加条目" οnclick="AddRecord();"> </td>  
27.     </tr>  
28.     </table>  
29. 
30. 
31. <script>   
32. function AddRecord()   
33. \{   
34.   var  row  =  tlist.insertRow(tlist.rows.length-2);  
35.   row.className='tit3';  
36.   var  i  =  row.rowIndex;   
37.   var  col  =  row.insertCell(0);     
38.   col.innerHTML  =  " <input type='text' name='fno' size=12 maxlength=12>";     
39.   col  =  row.insertCell(1);     
40.   col.innerHTML  =  " <input type='text' name='fdesc' size=32 maxlength=100>";     
41.   col  =  row.insertCell(2);     
42.   col.innerHTML  =  " <input type='text' name='fqty' size=7 maxlength=7 value='0' οnchange='chtotal(this);'>";     
43.   col  =  row.insertCell(3);     
44.   col.innerHTML  =  " <input type='text' name='fprice' size=6 maxlength=6 value='0' οnchange='chtotal(this);'>";     
45.   col  =  row.insertCell(4);     
46.   col.innerHTML  =  " <input type='text' name='finners' size=4 maxlength=4>";     
47.   col  =  row.insertCell(5);     
48.   col.innerHTML  =  " <input type='text' name='fouters' size=4 maxlength=4>";     
49.   col  =  row.insertCell(6);     
50.   col.innerHTML  =  " <input type='text' name='ftotal' size=8 readonly value='0'>";     
51.   col  =  row.insertCell(7);     
52.   col.innerHTML  =  " <input type='text' name='fremarks' size=20 maxlength=100>";  
53.   col  =  row.insertCell(8);     
54.   col.innerHTML  =  " <input type='button' value='删除' name='del' οnclick='delrecord(this);'>";   
55. \}   
56. 
57. function chtotal(e)  
58. \{  
59. 
60. var obj=e.parentNode.parentNode;  
61. var id=parseInt(obj.rowIndex)-1; 
62. var fqty=document.getElementsByName("fqty")\[id\];  
63. var fprice=document.getElementsByName("fprice")\[id\];  
64. var ftotal=document.getElementsByName("ftotal")\[id\];  
65. var delbutton=document.getElementsByName("del");  
66. var znum= document.getElementById("znum");  
67. var newzum=0;  
68. ftotal.value = fqty.value \* fprice.value;  
69. for(var j=0;j <delbutton.length;j++)  
70. \{  
71.   newzum+=parseFloat(document.getElementsByName("ftotal")\[j\].value);  
72. \}  
73. znum.innerHTML =newzum;  
74. 
75. \}  
76. 
77. function delrecord(obj)  
78. \{  
79.   obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  
80.   var delbutton=document.getElementsByName("del");  
81.   var newzum=0;  
82.   for(var j=0;j <delbutton.length;j++)  
83.   \{  
84.   newzum+=parseFloat(document.getElementsByName("ftotal")\[j\].value);  
85.   \}  
86.   znum.innerHTML =newzum;  
87. \}  
88. </script> 
89. </body> 
90. </html>