JS计算价格根据单价算总价
思路:
1. 当单价改变的时候,计算出这件商品的总金额,同时计算出所有商品的总金额;
2.当单件商品的总金额改变时,计算出所有商品的总金额
3.页面初始化的时候,单价有初始值,自动计算出商品的总金额,同时计算出所有商品的总金额;
注意事项:单价,总金额:input输入框输入的是只能是非负的浮点数或者整数.切只能保留两位小数点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>计算总价</title>
</head>
<body>
<div style="width:500px;height:500px;border:1px solid red;margin:0px auto">
<h1>计算价格</h1>
<table border="1">
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>商品单价</th>
<th>总金额</th>
</tr>
</thead>
<tbody id="tbl_tbody">
</tbody>
</table>
<p style="width:153px;float:right;">商品总金额：<span id="count_price"></span></p>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var order_info=[
{name:'可口可乐',num:3},
{name:'娃哈哈',num:4},
{name:'红塔山',num:5},
{name:'亲嘴猴辣条',num:6},
{name:'卫龙锅巴',num:7},
{name:'山楂片',num:8},
]
$(function(){
var str=""
for(let i=0;i<order_info.length;i++){
str+=`<tr class="tbl_tbody_tr">`
str+=`<td>${order_info[i].name}</td>`
str+=`<td>${order_info[i].num}</td>`
str+=`<td><input type='number' class="tbl_tbody_tr_td_price" οnblur="format_geshi(this);handleInput2(this)" step="0.01" οnkeyup="count_one_price(this,${order_info[i].num},${i})" /></td>`
str+=`<td><input type="text"/ class="tbl_tbody_tr_td_count"></td>`
str+=`</tr>`
}
$("#tbl_tbody").append(str)
})
function count_one_price(obj,num,index){
if (/^\d+(\.\d+)?$/.test(obj.value)){
handleInput2(obj);
$("#tbl_tbody").find(".tbl_tbody_tr").each(function(){
if($(this).index()==index){
$(this).attr("one_count_price",obj.value*num)
// console.info($(this).find(".tbl_tbody_tr_td_count").eq(0))
$(this).find(".tbl_tbody_tr_td_count").eq(0).val(obj.value*num);
}
});
};
if(obj.value==""){
$("#tbl_tbody").find(".tbl_tbody_tr").each(function(){
if($(this).index()==index){
$(this).attr("one_count_price",obj.value*num)
// console.info($(this).find(".tbl_tbody_tr_td_count").eq(0))
$(this).find(".tbl_tbody_tr_td_count").eq(0).val("");
}
});
};
count_price()
}
//检验格式
function format_geshi(obj){
if (!/^\d+(\.\d+)?$/.test(obj.value)){
obj.value='';
}
}
function handleInput2(e) {
e.value =(e.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
}
function count_price(){
var all_count_prcie=0;
$("#tbl_tbody").find(".tbl_tbody_tr").each(function(){
if(!(typeof $(this).attr("one_count_price")=="undefined")){
all_count_prcie+=parseFloat($(this).attr("one_count_price"));
}
})
$("#count_price").html(all_count_prcie);
}
</script>
</html>
JS计算价格根据单价算总价相关推荐
- js计算贷款金额怎么算
js实现贷款能力计算方法有哪些,js计算贷款金额怎么算代码教程如下: 1.自定义现持有资金 2.自定义现家庭月收入 3.自定义家庭月固定支出 4.自定义您期望贷款年限 5.自定义计划购买房屋面积 计算 ...
- js计算价格，保留小数
$(function(){ var alltr=$("#test tr"); var sum=null; var trsum=null; for ...
- js计算余额宝利息的代码
js计算余额宝利息怎么算,js计算余额宝利息的代码教程如下: 1.输入存入金额 2.输入存入日期 3.输入七天年化收益率 计算结果:计算出每个月的利息明细 js实现代码: function YuEBa ...
- 怎么用python算单价和总价_excel
1 首先,在工作中会遇到这样的问题,比如件数及单价,计算每件商品的价格或者毛利,然后再计算当天总的收入: 下面举例说明如下: 2 计算总价就是,数量*单价. 其实在excel中也是这样表达的,我们首先 ...
- 前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能
这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档: ...
- js计算女性标准三围怎么算
js计算女性标准三围怎么算,js计算女性标准三围的方法代码怎么写教程如下: 输入值:输入身高 计算结果:即可得出标准的3围数据 js实现代码: function result() {var heigh ...
- js计算个人所得税怎么算
js制作个人所得税计算器,js计算个人所得税怎么算代码教程如下: 1.自定义月工资金额 2.自定义各项社会保险费 计算结果:计算出累计应缴税款,已缴税款,应补(退)税款,实发工资 js实现代码: fu ...
- jQuery实现购物车计算价格统计功能
jQuery实现购物车计算价格统计功能 #功能介绍 进入界面,刷新触发onload方法跳转到JS代码,可以对购物车内商品数量进行增加-减少,商品价格自动统计.当更改商品数量的输入框value值时,整个 ...
- 最详细步骤加注释jq简单实现购物车选中并计算价格
实现的功能: 1.点击全选按钮是其他按钮也选中,并计算选中所有的商品价格 2.取消全选按钮,价格重新计算 3.单点每个商品的按钮并计算价格 小知识点(有空时小知识点要多回顾一下哦,加深记忆): ...
最新文章
- 「重返18岁」！英特尔首任CTO重磅回归，以CEO身份重掌帅印
- 第十五届全国大学生智能汽车竞赛各分赛区国赛获奖信息
- POJ 3268 迪杰斯特拉图论 置换找最短路
- Hi3516A开发--apt-get更新
- 系统无法分配所需内存_Innodb内存管理解析
- Java成神之路——CountDownLatch、CyclicBarrier
- greenplum查询超时_greenplum 集群故障(Sorry,too many clients already )排查：
- 汇总Eclipse快捷键
- struts2+spring的两种整合方式
- linux内核源码多大,需要多久才能看完linux内核源码？
- ios 表情符号 键盘_如何在iPhone和iPad上从键盘上删除表情符号按钮
- 金蝶云·星空python插件示例代码
- C# 使用AForge调用笔记本摄像头拍照
- 服务器4块固态硬盘做raid5,固态硬盘内RAID5技术
- 2023二建各科入门帮助
- 记一次WebService调用踩的坑
- 前端工程师的 2018 年总结
- c语言中用age表示年龄的词语,age和aged表示年龄的用法区别
- 可燃气体传感器在智慧消防中的应用
- NVIDIA DALI从入门到放弃之四：Multiple GPU