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