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) }