1 <div id="div">
 2     <table id="tab">
 3         <tr>
 4             <th>編號</th>
 5             <th>姓名</th>
 6             <th>性別</th>
 7             <th>年齡</th>
 8         </tr>
 9     </table>
10 </div>

window.onload = function(){
    var data = [
        [1,"王保利","男","10"],
        [2,"向兆澤","男","11"],
        [3,"李清坤","男","12"],
        [4,"陳鵬","男","33"]
    ];
    //初始化數據  把數據庫的數據輸出到頁面上
    initData(data);
    
    //添加事件    添加一行
    var addBtnDom = document.getElementById(‘btn‘);
    addBtnDom.addEventListener(
 
‘click‘,addElement);
};
//運行添加一行函數
function addElement(){
//    找到table
    var tab = document.getElementById(‘tab‘);
//添加一行                 添加節點
    var trDom = document.createElement(‘tr‘);    
//一共有5個單元個所以循環五次
    for(var i=0 ; i<5; i++){
//     每循環一次添加一個單元格
        var tdDom = document.createElement(‘td‘);
 
//單元格的內容為空
        tdDom.innerHTML =  " ";
//把td放到tr裏面
        trDom.appendChild(tdDom);
    }
//把tr放到table裏
    tab.appendChild(trDom);
}


/*
功能：用來把數據庫中的數據放到頁面上顯示
    數據是二維數組[【編號，姓名，性別，年齡】,...]
參數：無
返回：無
*/
//運行頁面加載完成後給的函數
function initData(dd){
//    找到table
    var tab = document.getElementById(‘tab‘);
    //有多少tr呢  dd.length 
    for(var i=0 ; i<dd.length; i++){
//        每循環一次在table裏追加一行  tr
        var trDom = document.createElement(‘tr‘);    
//       每次添加tr時給tr添加一個標記   在下面運行刪除時會用到
        trDom.setAttribute(‘num‘,i);
        //有多少td呢  dd[i].length
        for(var j=0 ; j<dd[i].length; j++){
//            每次循環添加一個td
            var tdDom = document.createElement(‘td‘);
//    把添加的td輸出到頁面上       dd[i][j] =  dd數組中二維數組的下標i一維數組的j下標的位置
            tdDom.innerHTML = dd[i][j];
//        把td添加到tr中
            trDom.appendChild(tdDom);
        }
//        在大循環中每次添加一個td。。  修改刪除所在的單元格
        var tdDom = document.createElement(‘td‘);
//        每次添加單元格事，在單元格中添加一個按鈕
        var btnModDom = document.createElement(‘button‘);
//       按鈕的內容是修改
        btnModDom.innerHTML= ‘修改‘;
//        按鈕的顏色是紅色
        btnModDom.style.color=‘red‘;
//        把按鈕添加到td裏
        tdDom.appendChild(btnModDom);
//        每次添加單元格事，在單元格中添加一個按鈕        
        var btnModDom = document.createElement(‘button‘);
//       按鈕的內容是刪除
        btnModDom.innerHTML= ‘刪除‘;
//     給刪除添加一個刪除事件
        btnModDom.setAttribute(‘onClick‘,‘delThis(this)‘);
//     並給這個按鈕添加一個標記刪除時可以用到
        btnModDom.setAttribute(‘num‘,i);
//        btnModDom.addEventListener(‘click‘,show);
//       每次循環都把按鈕追加到單元格
        tdDom.appendChild(btnModDom);
//        把td添加到tr裏
        trDom.appendChild(tdDom);
        //把tr追加到table裏面
        tab.appendChild(trDom);
    }
}
//運行delthis   刪除事件
function delThis(obj){
//    找到傳過來的這個元素的num值
//    obj.getAttribute(‘num‘);
//找到所有的行，  tr
//    var trArr = document.getElementsByTagName(‘tr‘);
//   循環所有的tr
//    for(var i=0 ; i<trArr.length; i++){
//        如果得到的這個元素的num和循環出來的值的num相等
//        if(trArr[i].getAttribute(‘num‘) == obj.getAttribute(‘num‘)){
//    就刪除這個行
//            trArr[i].remove();
//    結束循環
//            break;
//        }
//    }   找到元素的父標簽td的父標簽tr然後刪除掉
    console.log(obj.parentElement.parentElement.parentElement.remove());
}

一、六種JS插入節點的方式

innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement

今天介紹一下appendChild。

1.什麽是節點

　　HTML文檔中的所有內容都是節點：

　　1.整個文檔時一個文檔節點。

　　2.每個HTML元素是元素節點。

　　3.HTML元素內的文本是文本節點。

　　4.每個HTML屬性是屬性節點。

　　5.每個註釋是註釋節點。

一、創建節點、追加節點

1.createElement創建一個元素節點。
2.appendChild 追加一個節點。
3.createTextNode創建一個文本節點。
二、刪除、移除節點
1、removeChild(節點) 刪除一個節點，用於移除刪除一個參數（節點）。其返回的被移除的節點，被移除的節點仍在文檔中，只是文檔中已沒有其位置了。

三、替換節點
1、replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個參數，第一參數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。

四、查找節點
1、childNodes 包含文本節點和元素節點的子節點。

JS節點操作 （表格在js中添加行和單元格，並有一個刪除鍵）