温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery中怎么实现动态添加表格数据

发布时间:2021-06-19 13:05:42 来源:亿速云 阅读:1676 作者:Leah 栏目:web开发

本篇文章给大家分享的是有关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);//把副本单元格对象添加到表格下方

(二)统计更新总金额

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

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

 $("#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();   //调用函数统计更新总费用    }); //变化脚本结束

以上就是jQuery中怎么实现动态添加表格数据,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI