jQuery能够计算的表单,包含单选改变价格,select改变价格,动态加入删除行计算

各种表单情况的计算

JavaScript Code
  1. <script type="text/javascript">
  2. var currentRow = 3;
  3. $(document).ready(function(){
  4. $('#calx').calx();
  5. $('#add_item').click(function(){
  6. var $calx = $('#calx');
  7. currentRow++;
  8. $calx.append('<tr>\
  9. <td><input type="text" id="A'+currentRow+'" value="" /></td>\
  10. <td><input type="text" id="B'+currentRow+'" value="" data-format="$ 0,0[.]00" /></td>\
  11. <td><input type="text" id="C'+currentRow+'" value="" data-format="0" /></td>\
  12. <td><input type="text" id="D'+currentRow+'" value="" data-format="0[.]00 %" /></td>\
  13. <td><input type="text" id="E'+currentRow+'" value="" data-format="$ 0,0[.]00" data-formula="($B'+currentRow+'*$C'+currentRow+')*(1-$D'+currentRow+')" /></td>\
  14. <td><input type="button" value="remove" class="btn-remove" /></td>\
  15. </tr>');
  16. //update total formula
  17. $('#F1').attr('data-formula','SUM($E1,$E'+currentRow+')');
  18. $calx.calx('refresh');
  19. });
  20. $('#calx').on('click', '.btn-remove', function(){
  21. $(this).parent().parent().remove();
  22. $('#calx').calx('refresh');
  23. });
  24. });
  25. </script>
XML/HTML Code
  1. <table id="calx" width="80%" align="center">
  2. <thead>
  3. <tr>
  4. <td style="width:250px">Item Name</td>
  5. <td style="width:150px">Item Price</td>
  6. <td style="width: 50px">Qty</td>
  7. <td style="width: 80px">Discount</td>
  8. <td style="width:150px">Sub Total</td>
  9. <Td></Td>
  10. </tr>
  11. </thead>
  12. <tbody id="itemlist">
  13. <tr>
  14. <td><input type="text" id="A1" value="HDD Baracuda Black 2TB" /></td>
  15. <td><input type="text" id="B1" value="" data-format="$ 0,0[.]00" /></td>
  16. <td><input type="text" id="C1" value="" data-format="0" /></td>
  17. <td><input type="text" id="D1" value="" data-format="0[.]00 %" /></td>
  18. <td><input type="text" id="E1" value="" data-format="$ 0,0[.]00" data-formula="($B1*$C1)*(1-$D1)" /></td>
  19. <td><input type="button" value="remove" class="btn-remove" /></td>
  20. </tr>
  21. <tr>
  22. <td><input type="text" id="A2" value="BenQ LED Monitor 21 inch" /></td>
  23. <td><input type="text" id="B2" value="" data-format="$ 0,0[.]00" /></td>
  24. <td><input type="text" id="C2" value="" data-format="0" /></td>
  25. <td><input type="text" id="D2" value="" data-format="0[.]00 %" /></td>
  26. <td><input type="text" id="E2" value="" data-format="$ 0,0[.]00" data-formula="($B2*$C2)*(1-$D2)" /></td>
  27. <td><input type="button" value="remove" class="btn-remove" /></td>
  28. </tr>
  29. <tr>
  30. <td><input type="text" id="A3" value="Intel Processor i3 2328" /></td>
  31. <td><input type="text" id="B3" value="" data-format="$ 0,0[.]00" /></td>
  32. <td><input type="text" id="C3" value="" data-format="0" /></td>
  33. <td><input type="text" id="D3" value="" data-format="0[.]00 %" /></td>
  34. <td><input type="text" id="E3" value="" data-format="$ 0,0[.]00" data-formula="($B3*$C3)*(1-$D3)" /></td>
  35. <td><input type="button" value="remove" class="btn-remove" /></td>
  36. </tr>
  37. </tbody>
  38. <tfoot>
  39. <tr>
  40. <td colspan="4" style="text-align: right">Total Price :</td>
  41. <td id="F1" data-format="$ 0,0[.]00" data-formula="SUM($E1,$E3)"></td>
  42. <Td></Td>
  43. </tr>
  44. </tfoot>
  45. </table>
  46. <input type="button" value="Add new item" id="add_item" />

原文地址:http://www.freejs.net/article_biaodan_155.html

jQuery形式可以计算,它包含了无线电的变化价格,select价格变化,删除行动态计算加盟的更多相关文章

  1. Jquery判断数组中是否包含某个元素$.inArray()的用法

    判断数组里面是否包含某个元素可以使用 $.inArray("元素(字符串)",数组名称) 进行判断 ,当存在该元素(字符串)时,返回该元素在数组的下标,不存在时返回 -1 示例代码 ...

  2. 【Java】一个小程序,计算它包含的代码所需的耗时

    写一个小程序,用来计算它包含的代码所需的耗时.虽然简单,测试代码是否耗时还是有点用的,不用重新写嘛~ import java.util.Date; import java.util.concurren ...

  3. jquery判断一个标签是否包含另外一个标签

    jquery判断一个标签是否包含另外一个标签 一.总结 一句话总结: jquery的find方法配合length属性:if($("#video_md_9_1").find(&quo ...

  4. iOS 动态计算文本内容的高度

    关于ios 下动态计算文本内容的高度,经过查阅和网上搜素,现在看到的有以下几种方法: 1. //  获取字符串的大小  ios6 - (CGSize)getStringRect_:(NSString* ...

  5. 计算概论(A)/基础编程练习2(8题)/2:计算书费

    #include<stdio.h> int main() { // 声明与初始化 ; // k组测试数据的总费用 double s[k]; // 单价表 double price[]= { ...

  6. 动态计算UITableViewCell高度

    动态计算UITableViewCell高度 UILabel in UITableViewCell Auto Layout - UILabel的属性Lines设为了0表示显示多行.Auto Layout ...

  7. 动态计算Label高度

    //1.设置该label的numberOfLines为0 self.titleLabel.numberOfLines = 0;    //2.字体的设置要与之前相同 NSDictionary * at ...

  8. 还能输入多少字?(JS动态计算)

    <div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...

  9. iOS学习之根据文本内容动态计算文本框高度的步骤

    在视图加载的过程中,是先计算出frame,再根据frame加载视图的,所以在设计计算高度的方法的时候,设计成加号方法; //首先给外界提供计算cell高度的方法 + (CGFloat)heightFo ...

随机推荐

  1. 小猪的Android入门之路 Day 4 - part 1

    小猪的Android入门之路 Day 4 - part 1 Android事件处理机制之--基于监听的事件处理机制 本节引言: 在開始本个章节前,我们先回想下,如今我们已经知道了android的一些相 ...

  2. JDK源代码学习系列07----Stack

                                                                   JDK源代码学习系列07----Stack 1.Stack源代码很easy ...

  3. 在将 varchar 值 '2,7' 转换成数据类型 int 时失败

    消息 245,级别 16,状态 1,第 1 行在将 varchar 值 '2,7' 转换成数据类型 int 时失败. 原sql select  UserName from s_User  where ...

  4. Mono for Android开发调研笔记

    安装完Mono for Android(简称:MonoDroid)之后,可以用MonoDevelop或Visual Studio来开发Mono for Android应用程序:目前只能在模拟器上调试和 ...

  5. 实现能够直接粘QQ贴截图的bug管理功能

    对于一个功能强大的协作平台来说,todo管理和bug管理是不可缺少的功能.Todo和bug往往不是通过一些简单的文字就能实现的,有时候须要配以图片的说名,之前用过的项目管理平台都是以附件的形式上传图片 ...

  6. 21个js 技巧收藏

    1  Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...

  7. ZOJ3827 ACM-ICPC 2014 亚洲区域赛的比赛现场牡丹江I称号 Information Entropy 水的问题

    Information Entropy Time Limit: 2 Seconds      Memory Limit: 131072 KB      Special Judge Informatio ...

  8. 并发编程实践三:Condition

    Condition实例始终被绑定到一个锁(Lock)上.Lock替代了Java的synchronized方法,而Condition则替代了Object的监视器方法,包含wait.notify和noti ...

  9. web报告工具FineReport在使用方法和解决方案常见错误遇到(一)

    FineReport在使用方法和解决方案常见错误遇到(一) 这里写的开胃菜.我希望我们能理清自己的问题和解决办法干出来的,Mark一点点.有利于所有. 失败搜索出,如果有一个文件,看看你的度娘那里.看 ...

  10. Velocity脚本新手教程

    从网络下的数据汇编 一.Velocity简介 Velocity它是Apache该公司的开源产品,它是一套基于Java语言模板引擎,背景可以非常灵活的数据与模板文件一起反对.他直言不讳地说:,人使用模板 ...