jQuery 动态添加与统计 实现代码

jquery 动态添加与统计 实现代码

(一)创建克隆单元格对象并添加到表格中

var v=$("#tbin");//得到表格的jquery对象       

//所有的数据行有一个.myrow的class,得到数据行的大小

var vcount=$("#tbin tr").filter(".myrow").size()+1;//表格有多少个数据行 

var vtr=$("#tbin #trdatarow1"); //得到表格中的第一行数据         

var vtrclone=vtr.clone(true);//创建第一行的副本对象vtrclone

   vtrclone.appendto(v);//把副本单元格对象添加到表格下方

 

(三)计费重量变化时计算费用,并统计总费用

  $("#txtmoneyweight").bind("change", function()

        {

        var vtotalmoney=0;//总金额的初始值为0;        

        var vtxtdetail=$(this);//得到变化的文本框对象    

        var vval=vtxtdetail.val();           

var vtxtafter=vtxtdetail.parent("td").parent("tr").find("#txtrate");//得到费率;

var vtxtmoney=vtxtdetail.parent("td").parent("tr").find("#txtmoney");//得到费用;  

   var vmoney=calculatormoney(vval,vtxtafter.val());//使用公式计算单行运费

   vtxtmoney.val(vmoney); //显示单行运费信息          

    updatetotal();   //调用函数统计更新总费用

       

        }); //变化脚本结束

(二)统计更新总金额

function updatetotal()//更新总金额

      {

        var vtotalmoney=0;//总金额的初始值为0;              

        var vtable=$("#tbin");//得到表格的jquery对象   

        var vtotal= vtable.find("#txttotal") ;//得到总金额对象

        var vtxtafters=vtable.find("#txtmoney");//得到所有计算好的费用对象;

        vtxtafters.each(   //使用jquery的each函数遍历每行费用对象,累加成总金额

            function(i)

            {

            var vtempvalue=$(this).val();

                if(vtempvalue=="")

                {

                    vtempvalue=0;

                }

            vtotalmoney=vtotalmoney+parsefloat(vtempvalue);//计算总费用

            }

        )//遍历结束

         vtotal.val(vtotalmoney); //将总费用显示到对应文本框对象中

      }  

时间: 2024-10-02 10:16:37

jQuery 动态添加与统计 实现代码的相关文章

基于jQuery实现表格数据的动态添加与统计的代码_jquery

                                                          图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

jquery动态添加删除div 具体实现

这篇文章介绍了jquery动态添加删除div实现代码,有需要的朋友可以参考一下   复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <body> <form action="" method="post" enctype="multipart/form-data"> <

jQuery动态添加与删除tr行实例代码_jquery

这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery

Jquery动态添加及删除页面节点元素示例代码_jquery

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行. 废话不多说,直接上代码! 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery动态添加及删除页面节点</title> <script src="http://code.jquery.com/jquery-1.8.3.min.js&quo

jQuery动态添加删除select项(实现代码)_jquery

复制代码 代码如下: // 添加function col_add() { var selObj = $("#mySelect"); var value="value"; var text="text"; selObj.append("<option value='"+value+"'>"+text+"</option>");}// 删除function col_d

原生JS和JQuery动态添加、删除表格行的方法

  本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

jquery动态添加option选项

 jquery动态添加option选项,还有动态删除的方法,大家参考使用吧 jquery动态添加option   js动态添加option 代码如下: var sel= document.getElementById("Selected1");  sel.options.add(new Option("请选择","")); sel.options.add(new Option("name","id"));

JQuery动态添加和删除表格行的方法

 这篇文章主要介绍了JQuery动态添加和删除表格行的方法,实例分析了jQuery中动态操作表格行的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCoun

jQuery动态添加及删除表单上传元素的方法(附demo源码下载)_jquery

本文实例讲述了jQuery动态添加及删除表单上传元素的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(d