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=https://www.yisu.com/zixun/$(this).val();                  如果(vTempValue==" ") {vTempValue=0;}vTotalMoney=vTotalMoney + parseFloat (vTempValue);//计算总费用})//遍历结束vTotal.val (vTotalMoney);//将总费用显示到对应文本框对象中}

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

<>之前,美元(“# txtMoneyWeight") .bind (“change",,功能(),,,,,,,,,,{,,,,,,,,,var  vTotalMoney=0;//总金额的初始值为0;,,,,,,,,,,,,,var  vtxtDetail=$(这);//得到变化的文本框对象,,,,,,,,,,,,,,,,var  vVal=vtxtDetail.val (),,,,,,,,,,,,,,, var  vtxtAfter=vtxtDetail.parent (“td") .parent (“tr"); (“# txtRate");,,,,,,,,,,//得到费率;,,var  vtxtMoney=vtxtDetail.parent (“td") .parent (“tr"); (“# txtMoney");,,//得到费用,,,,,,,var  vMoney=CalculatorMoney (vVal, vtxtAfter.val());,,//使用公式计算单行运费,,,,vtxtMoney.val (vMoney);,,,//显示单行运费信息,,,,,,,,,UpdateTotal();,,,//调用函数统计更新总费用,,,,});,//变化脚本结束

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

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