這篇文章主要介紹了js中如何對表格進(jìn)行逐行添加，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元宛城做網(wǎng)站,已為上家服務(wù),為宛城各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

關(guān)于js對表格進(jìn)行逐行添加，今天抽空整理了一下：新建一個html文件（沒有編輯器的可以新建一個demo.txt文件，然后改后綴名為demo.html），把下面代碼全部貼進(jìn)去即可。

功能包括：表格添加一行，表格刪除一行，表格遍歷取值等。

點(diǎn)擊說明：點(diǎn)擊添加按鈕，則表格添加一行，可進(jìn)行錄入，刪除按鈕，可刪除當(dāng)前行，其他行不影響。刪除或者添加，每行的的編號都會自動變化，套餐和價格是，內(nèi)容是

,點(diǎn)擊保存按鈕的時候，遍歷表格中所有行，把所有行的數(shù)據(jù)取出來彈框彈出展示，后期可根據(jù)需求傳遞到后臺進(jìn)行處理。

效果圖：

源代碼：

  
  



  function del(obj){
    if(document.getElementById('tbodyid').children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById('tbodyid').removeChild(objtr);
    var tbody=document.getElementById('tbodyid');
    var countchildren=tbody.childElementCount;
    for (var i=0;i " +
    "       " +
    "       " +
    "      刪除";
    document.getElementById("tbodyid").appendChild(objtr);
    var tbodyobj=document.getElementById('tbodyid');
    var countchildren=tbodyobj.childElementCount;
    for (var i=0;i


  
  
    動態(tài)增加表格
    
    
      序號
      套餐
      內(nèi)容
      價格
      操作
    
    
    
    
      1
      
      
      
      刪除
    
    
  
    添加
    保存