1. 首先我們要知道，動態添加，肯定不是 在頁面上寫死得，而是通過js調用循環放入到頁面上的，我們在寫動態表格的時候不要先着急寫，我們第一步要做的就是構思，要把自己的邏輯先弄清楚，不然的話，前面是好寫，到最后你就不好寫了，到最后有可能要推倒重來，因為我之前就是這樣。
2.接下來我們開始來完成代碼部分
我們寫死在頁面上的的東西應該有查詢按鈕 全部刪除 添加 還要給它一個form表單用於添加和修改數據，其實可以換別的添加和修改的方法，這里只給一個參考
代碼如下：
Html:
css:
table{position: relative;}
.head{width: 700px;height: 50px;margin: 25px auto;}
.but{margin-left: 500px;}
td{text-align: center;line-height: 50px;font-size: 20px;font-weight:bold;width: 120px;height:30px;border:1px solid black;}
.box{width: 250px;height: 250px;border:1px solid black;position: absolute;background-color: red;text-align: right;top:200px;left: 800px;display: none;z-index: 100;}
.box>button{margin-top:10px;}
js部分：
我們要在js當中創建一數組容器，來裝我們想要的數據（二維數組也可以）；根據自己的編寫方式來，如下：
接下來就是往我們頁面上添加這些數據了，在我們添加之前我們先把表格建立前來，所以我們要先創建表格
var bodys = document.body;//先找到body
var table = document.createElement("table");//在創建這個元素
bodys.appendChild(table);//最后把表格添加進去
此時我們的頁面結構就是這樣的
我們可以看見我們把表格table標簽添加進去了
其他的同理
通過for in 這個循環來添加表頭
在追加內容，通過for循環便利tr,然后再通過for in 這個循環來添加內容
我們都知道表格里面還有一些功能 比如全選，單行的修改和刪除，所以接下來我們來完成下面的功能
我們的全選和單選一般都是放到表格的第一列
所以我們就要找到每一行的第一個td然后添加在他前面，所以我們應該想到dom樹的插入的知識點
eg.insertBefore(a,b);//把a放到b的前面；所以把全選和單選放就放到了第一列
然后添加操作，單個的修改和刪除就好添加了
直接獲取到要添加的那一行，然后用eg.appendChild()添加就好了，此時我們的頁面就寫好了：效果圖如下
然后就是依次實現上面的功能了
全選事件：
var all = document.querySelector("thead>td:first-child>input");
// 找到table下面thead下第一個td中的input，為其綁定單擊事件
all.onclick= function(){
var chb=document.querySelectorAll("table>tbody>tr>td:first-child>input");
// 獲取table下tbody下所有第一個td中的input
for(var i= 0;i<chb.length;i++){
// 遍歷chb數組中每個chb
chb[i].checked=this.checked;
// 讓每一個chb的狀態都跟All得狀態一樣
}
}
// 單個選中取消操作
var chb=document.querySelectorAll("table>tbody>tr>td:first-child>input");
// 找到table下tbody下的所有第一個td中的input 保存在chbs
for(var i=0;i<chb.length;i++){
// 遍歷chb數組中每個chb
chb[i].onclick=function(){
// 為當前chb綁定單擊事件
if(!this.checked){
// 如果當前chb未選中
all.checked=false;
// all修改為未選中
}
else{
var unSel = document.querySelectorAll("table>tbody td:first-child>input:not(:checked)");
// 獲得table中tbody下所有第一個td中的未選中的input unSel
if(unSel.length==0){
// 如果unSel的length是等於0
all.checked=true;
// all修改為選中
}else{
all.checked=false;
// all修改為未選中
}
}
}
}
//修改事件
var but1= document.getElementsByClassName("but1");//找到這個按鈕
// console.log(but1);
for(var j=0;j<but1.length;j++){
but1[j].onclick = fun;//將這個按鈕循環遍歷添加單機事件
}
function fun(){
document.getElementsByClassName("box")[0].style.display = "block";//當觸發這個事件的時候class名為box的form表單顯示
var tr= this.parentNode.parentNode;//讓后找到當前行的tr
var td = tr.getElementsByTagName("td");//再找當前行下面的td
var input = document.getElementsByClassName("int");//然后獲取表單中的全部input框
// console.log(input)
for (var i = 0;i < input.length;i++) {//然后循環input
input[i].value = td[i+1].innerHTML;//並把td的值賦值給input框，這里的td為什么要加1；因為td的地0個是單選框；
}
//確定
var box2 = document.getElementsByClassName("box2")[0];//然后獲取確定按鈕的ClassName；
box2.onclick = function(){//單機事件
document.getElementsByClassName("box")[0].style.display = "none";//當觸發這個事件的時候class名為box的form表單隱藏
var td = tr.getElementsByTagName("td");//再找當前行下面的td
var input = document.getElementsByClassName("int");//然后獲取表單中的全部input框
for (var i = 0;i<input.length;i++){//然后循環input
td[i+1].innerHTML = input[i].value;//並把input框的值賦值給td
}
}
}
//清空
var box1 = document.getElementsByClassName("box1")[0];//找到當前的按鈕
box1.onclick =function(){
var input = document.getElementsByClassName("int");//找到所有的input框
for (var i = 0;i < input.length;i++) {
input[i].value = "";//並讓里面的值為空
}
}
//刪除
var but2 = document.getElementsByClassName("but2");//找到當前的按鈕
for(var i = 0;i<but2.length;i++){
but2[i].onclick = fun2;//將這個按鈕循環遍歷添加單機事件
}
function fun2(){
var tr= this.parentNode.parentNode;//找到當前點擊的父節點的父節點tr
// console.log(tr);
var a =document.getElementsByTagName("tbody")[0];//在找到tbody
// console.log(a);
a.removeChild(tr);//在通過tr的父親把tr刪除
alert("是否刪除！");
}
//全部刪除
var but = document.getElementsByClassName("but")[0];
but.onclick = function(){
var bodys = document.body;
var tables= document.getElementsByTagName("table")[0];
console.log(tables);
bodys.removeChild(tables);
alert("確定全部刪除！");
}
和單行刪除差不多
//添加
var but1 = document.getElementsByClassName("but1")[0];//找到當前的按鈕
but1.onclick = function(){
document.getElementsByClassName("box")[0].style.display = "block";//當觸發這個事件的時候class名為box的form表單顯示
}
var input = document.getElementsByClassName("int");//找到當前的按鈕
var box3 = document.getElementsByClassName("box3")[0];//找到當前的按鈕
box3.onclick = function(){
var obj = {};//創建一個對象
for(var i=0;i<input.length;i++){
obj[i]=input[i].value;//循環並把input的值賦值到obj對象里面
}
data.push(obj);//並放到數組里面
ayy(data)；//並調用函數，
}
// 查詢
// input框
var phone = document.getElementsByClassName("phone")[0];
// console.log(phone);
var button = document.getElementsByClassName("button")[0];
// console.log(button);
button.onclick = function(){
var arr = [];//創建一個空數組
for(var i =0;i<data.length;i++){
if(data[i]["聯系電話"]==phone.value){//並判斷，找到你要查詢的方式，並賦值給新數組
arr.push(data[i]);//並把值放到arr中
}
}
ayy(arr);//調用封裝函數
}
這就是我的思路，，完整代碼請看下一篇博客。