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中怎么實現動態添加表格數據，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。