jquery小demo——计算送货清单总价

最新推荐文章于 2024-10-09 00:58:21 发布
最新推荐文章于 2024-10-09 00:58:21 发布
阅读量98 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/cacti/p/5206291.html
版权

具体实现的计算效果为下图：

代码为：

<!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=utf-8" />
<title>送货清单总价</title>
<style type="text/css">
/* 提交订单界面 */
#tab{ margin-bottom:10px;}
#tab > tbody > tr > td{ text-align:left; border-top:1px solid #ccc; padding:10px 0;}
#tab > thead > tr > th{ padding:15px 10px 15px 10px; text-align:left;}
.cac_tjdd_img > img{ width:100px; height:100px; border:1px solid #2b9ce8;}
.cac_wlsf{padding:5px 8px; background:#09F; color:#fff; position:absolute; top:10px; right:10px;}
.cac_zzsfp{ position:absolute; background:#fff; border:1px solid #2b9ce8; width:800px; height:555px; z-index:99; left:50%; top:100px; margin-left:-400px;}
.cac_zzsfp > h6{ border-bottom:1px solid #2b9ce8; color:#000; font-size:20px; padding:10px 10px;}
.cac_zzc1{ background:rgba(0,0,0,0.7); z-index:100; position:fixed; left:0; top:0; right:0; width:100%; height:100%; display:none;}

</style>
</head>

<body>
<div class="col-xs-12">
<table width="100%" border="0" id="tab" style="border-top:1px solid #7eb4dc;">
  <thead>
  <tr>
    <th scope="col">&nbsp;送货清单</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;型号</th>
    <th scope="col">&nbsp;单价</th>
    <th scope="col">&nbsp;数量</th>
    <th scope="col">&nbsp;小计</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td class="cac_tjdd_img">&nbsp;<img src="img/1.jpg"></td>
    <td>&nbsp;<span>凯立德K370S7英寸电容屏高清车载GPS导航仪</span></td>
    <td>&nbsp;7英寸</td>
    <td>&nbsp;￥<span class="cac_price">499</span></td>
    <td>&nbsp;<span class="cac_num">2</span></td>
    <td>&nbsp;￥<span class="cac_zj"></span></td>
  </tr>
  <tr>
    <td class="cac_tjdd_img">&nbsp;<img src="img/1.jpg"></td>
    <td>&nbsp;凯立德K370S7英寸电容屏高清车载GPS导航仪</td>
    <td>&nbsp;7英寸</td>
    <td>&nbsp;￥<span class="cac_price">499</span></td>
    <td>&nbsp;<span class="cac_num">1</span></td>
    <td>&nbsp;￥<span class="cac_zj"></span></td>
  </tr>
  </tbody>
</table>
</div>

<div class="col-xs-12 cac_mart_20">
    <div class="pull-right">应付总额：<span style="color:#fa0707;">￥</span><span class="cac_total" style="color:#fa0707;"></span></div>
</div>

</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){ 
function setTotal(){ 
var s=0;
var st=0; 
var aTr=$('#tab tbody tr');
var aNum=aTr.find('span[class=cac_num]');
var aPrice=aTr.find('span[class=cac_price]');
var totalPrice=aTr.find('span[class=cac_zj]');
aTr.each(function(index){
 s=parseInt(aNum.eq(index).text())*parseFloat(aPrice.eq(index).text());
 totalPrice.eq(index).text(s);
 st+=s;
//s+=parseInt($(this).find('span[class=cac_num]').text())*parseFloat($(this).find('span[class=cac_price]').text()); 
}); 
$(".cac_total").html(st.toFixed(2)); //.toFixed()方法可把Number四舍五入为指定小数位数的数字 ，此处为保存2位小数
} 
setTotal(); 

}) 

</script>

</html>
View Code

 

转载于:https://www.cnblogs.com/cacti/p/5206291.html

dengyu6119
关注
通过jquery实现购物车的全选加减以及计算总价
weixin_52153452的博客
12-15 1902
通过jquery实现购物车的全选加减以及计算总价
jQuery计算购物车总价
liubt817的博客
09-17 606
jQuery实现购物车计算总价
jQuery商品数量加减并计算总价代码
06-10
jQuery商品数量加减并计算总价代码是一款类似商城增加减少商品件数特效，也可以在文本框直接输入数值，随着数量的改变计算出总价。
JQuery动态增加删除表格，计算总价
Wisdom—Yoga—TaciturnKnight（WYT）
09-01 721
序号 物品名称 品牌 规格型号 数量 预算单价 预算总价 用途 相关操作 合计 小写 大写 JQuery   动态增加 //添加新记录 $("#bu").click(function(){ var max_line_num = $
JQuery购物车多物品数量的加减+总价计算
热门推荐
Mick_小马哥
12-19 1万+
JQuery购物车多物品数量的加减+总价计算
Educoder/头歌JAVA——jQuery动画
舟舟的博客
12-12 4234
动画是使元素实现从一种样式逐渐变化为另一种样式的效果。jQuery动画包括隐藏/显示，淡入/淡出，上滑/下滑，自定义动画等效果。 本实训的主要内容是jQuery动画，从动画效果的方法到自定义动画，可以创建自己想要的动画效果。
jQuery实现购物车商品数量及总价的计算
luoyu6的博客
10-28 1万+
  记录一下项目中遇到的计算购物车商品数量和总价的jQuery代码，重点在于选择器以及.text()命令的使用。 先上效果图，点击加减，商品数量以及总价会发生相应变化。 html代码：   &lt;div class="addGoods"&gt; &lt;div class="goods_list"&gt; &lt;ul&gt; ...
jQuery练习——下拉菜单
m0_55394328的博客
09-12 3592
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。 笔者还是前端的菜鸟，还请大家多多指教呀~
常用的jquery模板插件——jQuery Boilerplate介绍
01-19
在初次进行jquery插件开发时，我们往往无从下手，当然我们可以按照jquery官方提供的格式进行简单的插件开发，但是很...在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate jQuery Boilerpl
jQuery.flipster——简单好用的立体式banner切换插件
06-10
效果描述： 简单好用的立体式左右滚动banner焦点图效果 源代码没有任何图片，且CSS较为冗余，懒人站长已经做过优化，方便懒人们使用 使用方法： 1、将CSS引入到你的页面中，保证命名不冲突 ...
jquery ui demo
04-15
这个“jquery ui demo”正是一个展示jQuery UI功能的实例集合，通过它，我们可以深入理解和学习如何在实际项目中运用jQuery UI。 首先，jQuery UI 包含了多种组件，如对话框（Dialog）、日历（Datepicker）、拖放...
Ajax+JQuery应用Demo
05-11
工作之余写的一些Ajax应用，有6个Demo,数据库为mysql，使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1228
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 271
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
Vue根实例、实例总结
m0_54007573的博客
10-04 632
Vue根实例、实例总结
vue-live2d看板娘集成方案设计使用教程
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
10-05 1455
vue-live2d看板娘集成方案设计使用教程
javascript中==和===有什么不同
最新发布
qq_48763502的博客
10-09 272
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
VUE2常见问题以及解决方案汇总（不断更新中）
tangdou369098655的博客
10-06 445
解决vue项目中 el-table 的 @row-click 事件与行内点击事件冲突，点击事件不生效（表格行点击事件和行内元素点击事件冲突）需要阻止事件冒泡，vue子组件传递数据给父组件，vue + elementui 使用dialog弹出框作为子组件，首次点击弹框可以显示，第二次点击弹框后赋值无法打开弹框，动态循环生成el-checkbox后数据更新但是页面不更新，无法取消勾选，点击无效问题
深入解析 JavaScript 中的普通函数与箭头函数：区别、适用场景与最佳实践
qq_22841387的博客
10-02 1184
在函数式编程的支持上，箭头函数作为 ES6 新引入的一种更为简洁的函数形式，极大地方便了开发者编写简洁高效的代码。然而，箭头函数的行为与传统的普通函数有所不同，尤其是在 this。普通函数在定义时，尤其是带有单行返回值的情况下，显得略微冗长。无论是全局调用、作为对象方法调用，还是在事件处理函数中调用，动态变化的场景，比如回调函数，尤其是在类方法中作为回调传递时，箭头函数避免了手动绑定。在回调函数、数组操作等场景中，箭头函数的简洁性尤为明显。在定义对象的方法时，箭头函数由于不绑定自己的。
jQuery学习笔记——事件
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要绑定事件的元素，`event` 表示要绑定的事件类型，比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件： ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样，当 `event1` 或 `event2` 中任意一个事件触发时，对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序，可以使用 `off()` 方法： ``` $(selector).off(event); ``` 其中，`event` 表示要解除的事件类型。如果不指定事件类型，则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中，我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上，而不是绑定到子元素上，然后通过事件冒泡来判断是哪个子元素触发了该事件。这样，当子元素数量较多时，只需要绑定一次事件，就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中，`selector` 表示父元素，`event` 表示要绑定的事件类型，`childSelector` 表示要委托的子元素的选择器，事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作，希望对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值