js的動態表格的增刪改查

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; } data.push(obj) ayy(data) }