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中怎么实现动态添加表格数据,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
分享标题:jQuery中怎么实现动态添加表格数据
网站链接:http://scyanting.com/article/ijshdj.html