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

最新推荐文章于 2020-07-05 17:35:30 发布
最新推荐文章于 2020-07-05 17:35:30 发布
阅读量4.3k 收藏 8
点赞数
分类专栏： js 文章标签： button border class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chinmo/article/details/3370041
版权
  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>
  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' onchange='chtotal(this);'> </td> 
  17.     <td><input type="text" name="fprice" size=6 maxlength=6 value='0' onchange='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' onclick="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="增加条目" onclick="AddRecord();"> </td> 
  27.     </tr> 
  28.     </table> 
  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. }  
  57. function chtotal(e) 
  58. { 
  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; 
  75. } 
  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>
 
一把编程的菜刀
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js表格中将每行的两个数据求和显示_3种根据单元格填充色求和与计数方法，再也不用一个一个的计算了...
weixin_39804335的博客
11-28 575
Hello,大家好，今天跟大家分享下我们如何根据单元格的颜色进行求和与计数，很多粉丝都提到过类似的问题，其实这都是源于我们数据整理的时候太过随意，如果在数据整理的的时候就能将数据分类独立的罗列出来，后期直接求和或者计数即可，根据单元格颜色求和与计数各跟大家分享3种方法一、查找法首先我们要选择想要统计的数据区域，然后按Ctrl+F调出查找的窗口，然后点击选项，点击格式选择从单元格选取格式，鼠标就会变...
js,底层处理price处理方法
weixin_40542544的博客
01-07 769
/** * 处理价格，默认是元，分第二个参数传100 * dealPrice(5) => 5.00；dealPrice(500, 100) => 5.00； */ export function dealPrice(x, d = 0) { let f = parseFloat(x); if (isNaN(f)) { return; } if (f == 0...
js端，汇总行的数据求和
qq_39822451的博客
06-26 649
//隐藏掉code列 hideHeaderCol(); //存放需要计算合计的汇总行集合 var area = []; $("#yourMind").find("tbody tr").each(function (i) { var _tr = $(this); //通过指定标识，查找需要求和的汇总列数据 if (_tr.childre...
js-quantities:JavaScript库，用于数量计算和单位转换
04-30
JS数量是作为UMD和ES模块构建的，可以与Node.js和浏览器一起使用。 它没有依赖项。 安装 使用npm install js-quantities或以以下方式下载最新版本v1.7.6： 用法 Node.js // As CommonJS module const Qty = ...
magento2-enhanced-qty:在每个数量输入字段旁边添加数量按钮
05-06
定位-Magento 2模块增强数量 Magento 2模块在每个数量输入字段旁边添加数量按钮。 使商店的客户更容易增加或减少产品的数量。目录安装通过以下方式安装... 而且enhanced-qty.js将处理增量和减量。SCSS支持该模块还
qty.js:解析，验证，操作和显示不同度量单位中的值
05-10
解析，操作，格式化和验证不同度量单位中的值。 安装 浏览器 $ bower install --save qty 在您的html中包含Qty.js及其依赖项： < script src =" components/underscore/underscore.js " > </ script >...
SQL行转列和列转行代码详解
09-09
这个例子中，`UNPIVOT`将原表中的[2002]、[2003]、[2004]列转为行，每行包含一个年份和对应的数量。 对于动态行转列或列转行，通常在无法预知列数的情况下使用。动态SQL可以通过构建查询字符串并在运行时执行来实现...
Dynamics AX Qty Price 数据精度（小数位数）设置
12-11
Dynamics AX 默认数量、金额小数位数只有2位，本方法用于扩展小数位数。
js某一列值的合计统计
12-21
js某一列值的合计统计，这是对前端某一字段的值进行统计，不是从后台数据库中调取数据。对于某一列值有进行过运算处理过的统计，就很值得一用了。
表单内容计算求和功能.html
04-16
html表单的内容计算求和功能，里面有详细的解释和出错原因。非常详细。供以后学习和使用。
js price
hejias的专栏
07-05 352
。。。。。 //价格 start //价格检查 例如 99.00 by2020.07.05 亲自测试没问题 function price_check_alert(price,alertstr){ var t=price_check(price); if(t){ return t; }else{ alert(alertstr); return t; } } //价格检查 例如 99.00 by2020.07.05 亲自测试没问题 function pric
Js代码实现商品价钱总和（模拟购物车功能）
热门推荐
Freya_yyy的博客
05-11 1万+
用js简单实现商品数量的选购、小计的计算以及总的价钱数、总的商品数量等一系列操作。代码如下：题设的主体HTML代码如下：（以作事例）&lt;body&gt; &lt;ul id="list"&gt; &lt;li&gt;樱桃&lt;br&gt; &lt;input type="button" value="-" /&gt; &lt;stron
一个JS数组，怎么计算所有值的和
qq_36250925的博客
08-24 7767
方法一： var result = 0; for(var i = 0; i &lt; arra.length; i++) { result += arra[i]; } 方法二： 最优解（个人目前碰到的）应该是这样的： let sum = 0; function sumArr（arr）｛ return eval（arr.join（“+”））; ｝ sum = sumArr（arr）; 和普通的...
实例讲解JS计算表格每行的和与总和代码
友间博客
03-19 1423
IT知道网_ww.itwis.com--javascript计算每行的和与总和（QTY，PRICE，TOTAL，合计） ITEM NO ITEM DESCRIPTION QTY PRICE INNER OUTER TOTAL REMARKS 操作 ...
jquery手写table行列自动计算（自动计算小计和合计）
qq_16063177的博客
01-05 1万+
第一次接触这种要涉及行列计算的东西，苦死冥想了一天，也没想出来，上百度搜了搜也没有自己想要的，在17点左右，结果就这样10分钟之内就忽然想出来了，好高兴的！！！ 首先，我做的这个功能是大表里面有一个小表，小表可以添加一行，删除其中某行。如下图： 输入数据前： 输入数据后： 可见我在伙食补助里面输入了一个2.25，自动生成了小计2.25和总计2.25元。 我再多输入点数据。
js table行列合计计算案例
最新发布
05-05
下面是一个简单的JavaScript表格行列合计计算案例： HTML代码： ```html 商品 价格 数量 小计 商品A <td>10.00 <td><input type="number" value="1" onchange="updateSubtotal(this)"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一把编程的菜刀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值