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);//把副本单元格对象添加到表格下方

(二)统计更新总金额

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