在表格上实现计算

最新推荐文章于 2022-05-11 13:47:03 发布
最新推荐文章于 2022-05-11 13:47:03 发布
阅读量277 收藏
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540326/article/details/92760216
版权

在表格上实现计算

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS

作者：吴业华

撰写时间：2019年6月15号

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这篇我们来了解一下在表格中如何实现计算呢

打个比方 a*b=c

那么就是 在a表格输入a值

           在b表格输入b值

           在c表格获取a*b

  那该怎么做呢

  首先我做的例子是：

  HTML部分如下 在td标签内包含input标签

  td是表格 input是输入框 并且给它加上个id

  方便我们找到它

在图中我们可以看到鼠标光标点击处 onkeyup这个事件 并给它绑定的方法为：

=“ffff()”

并且在两个地方都绑定上这个事件

第一个的地方是 id=”Amountt” 

第二个的地方是 id=”Discount”

第一个是数量

  第二个是折扣

  id=”SellPricee”单价    id=”Moneyy”金额

在w3c中可以看到我给标签绑定的是 在键盘上释放按键时触发的事件

  Js代码：

我在HTML部分设置了 俩次触发ffff这个方法的事件是因为

这样不仅输入单价和数量的时候可以计算出金额

而且在输入单价、数量和给他打个折再计算出金额

一纸斜阳一纸梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
excel表格中如何实现计算货品的sku.rar
03-23
excel表格中如何实现计算货品的sku.rar
excel表格如何计算天数.pdf
11-30
在Excel表格中，计算天数可以通过使用日期和时间函数来实现。日期和时间函数是Excel中的一种特殊函数，可以用来处理日期和时间相关的计算。常用的日期和时间函数包括TODAY、NOW、DATEDIF、DATEDAY、MONTH、DAY、YEAR...
numpy（1）基本使用及常用统计函数
斜光的博客
11-18 387
常用方法 1.1、数据类型的操作 In [9]: t3 = np.array([[[1,2,3],[4,5,6]],[[7,8,9],[10,11,12]]]) In [10]: t3 Out[10]: array([[[ 1, 2, 3], [ 4, 5, 6]], [[ 7, 8, 9], [10, 11, 12]]]) 1.1...
js 实现简单的表格操作----增删解惑
王 濤
03-30 286
话不多说，干货走起！！！ 首先是 html 部分的代码 <body> 姓名: <input type="text"><br> 年龄: <input type="number" min="18" max="250"><br> 姓名: 男<input type="radio" name="sex" valu...
“银行家算法”讲解，在前端表格中利用自定义公式实现“四舍六入五成双”
葡萄城技术团队博客
05-11 5359
银行的盈利模式是什么?三个字：信息差!从储户手中收拢资金，然后放贷出去，而所谓的“利润”就是这其中的利息差额。 在我国，人民银行规定每个季度月末的20号为银行结息日，每一年四次结息，因此每年需要非常频繁的计算付给储户的利息。在计算利息时，小数点如何处理就变得很重要，并成为决定利润多少的关键细节。 （图片来自于网络） 通常，我们都知道在保留小数点的时候，常常会用到四舍五入。小于5的数字被舍去，大于等于5的数字进位后舍去，由于所有位上的数字都是自然计算出来的，按照概率计算可知，被舍入的数字均匀分布在0到9之间
实现表格自动计算
weixin_34410662的博客
03-03 566
先来看看实时操作动画演示： 每一行进行小计，数量 X 单价。而总计则是把表格中小计列所有行进行相加。 Html code: &lt;table id="Order"&gt; &lt;tr&gt; &lt;th&gt;费用名目&lt;/th&gt; &lt;th&gt;数量&lt;/th&gt; &lt;th&
前端表格通过js计算生成合计行
qq_43038965的博客
09-04 3450
想把一个表格的最下面添加一个合计行，有很多种实现方式，可以在sql中通过sum函数计算得到结果返回后台再传给前端填充，也可以在后台通过sql查出的基础数据做累加，再传给前端。但是这两种方法都比较麻烦，数据量少还行，数据要是多了，逻辑写的让人头皮发麻。所以可以通过前端获取表格中的信息，直接循环生成合计行。 首先在页面定义一个空表格 <div id="main1right" style="...
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
Vue 自适应高度表格的实现方法
10-15
主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js简单表格操作
07-15
js简单表格操作，对表格进行增删改，效果可看博客： https://blog.csdn.net/qq_37902949/article/details/81056551
使用JavaScript 完成表单的自动计算
04-06
使用JavaScript 完成表单的自动计算
实现电子表格自动计算.pdf
最新发布
09-23
实现电子表格自动计算.pdf
js中关于表中数据的计算
admin_gygg的博客
01-24 1445
function(){ var a = 0; var b = 0; // 获得表格数据 var items = document.getElementById("telcalc0501Table"); for(var i = 1;i // 获得表格里td的长度 var s = $("#telcalc0501Table tbody tr td").length; if(s > 1)
vue实现表格公式计算
06-08
Vue可以通过计算属性和监听器来实现表格的公式计算。以下是一个简单的示例： 在template中，我们可以使用v-model来绑定表格中的数据，并且使用计算属性来计算每一行数据中的总和： ```html <table> <thead> <tr> <th>数量</th> <th>单价</th> <th>总价</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td><input type="text" v-model="item.num"></td> <td><input type="text" v-model="item.price"></td> <td>{{ item.total }}</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>总计：</td> <td>{{ total }}</td> </tr> </tfoot> </table> ``` 在script中，我们可以使用计算属性来计算每一行的总价，并且使用监听器来监听数据的变化： ```javascript export default { data() { return { items: [ { num: 2, price: 10 }, { num: 3, price: 20 }, { num: 4, price: 30 } ] }; }, computed: { total() { let sum = 0; this.items.forEach(item => { sum += item.total; }); return sum; } }, watch: { items: { deep: true, handler(newVal, oldVal) { newVal.forEach(item => { item.total = item.num * item.price; }); } } } }; ``` 在上面的代码中，我们使用watch来监听items数组的变化，当items数组中的数据发生变化时，我们可以重新计算每一行的总价，从而更新表格的显示内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值