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

最新推荐文章于 2024-04-15 09:51:42 发布

mldxs

最新推荐文章于 2024-04-15 09:51:42 发布

阅读量930

点赞数

分类专栏： javascript 文章标签： button border class

本文链接：https://blog.csdn.net/mldxs/article/details/3390877

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

 
 <!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> 
 

mldxs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS计算每行的和与总和（QTY，PRICE，TOTAL，合计）

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/1999/xhtml"> "Content-Type" content="text/html; charset=gb2312" /> JS计算每行的和与总和（Q
复制链接

扫一扫