jQuery技术

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

字号+ 作者:H5之家 来源:H5之家 2015-11-04 14:05 我要评论( )

jquery 动态添加与统计 实现代码(一)创建克隆单元格对象并添加到表格中var v=$( tbin); 得到表格的jquery对象 所有的数据行有一个 myrow的class,得到数据行的大

jQuery 动态添加与统计 实现代码 来源:   时间:2013-09-05 20:23:45   阅读数:

[导读] jquery 动态添加与统计 实现代码(一)创建克隆单元格对象并添加到表格中var v=$(" tbin"); 得到表格的jquery对象 所有的数据行有一个 myrow的class,得到数据行的大小var vcount=$(" tbin tr") filter(" m

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); //将总费用显示到对应文本框对象中

      }  


除非特别声明,PHP100新闻均为原创或投稿报道,转载请注明作者及原文链接
原文地址:

上一篇:jquery lazyload图片延迟加载原理(1/2)
下一篇:jquery.lazyload 图片延迟加载实例

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery event事件对象用法浅析

    jQuery event事件对象用法浅析

    2016-01-14 14:17

  • jQuery css()选择器使用说明

    jQuery css()选择器使用说明

    2015-11-01 11:07

  • JQuery处理json与ajax返回JSON实例

    JQuery处理json与ajax返回JSON实例

    2015-10-22 12:28

网友点评
=