当你花费三天写完增删改查动态表格的感受

当我看到老师发给我这个效果图的我一脸懵，压根不知道怎么做到让一个表格实现动态的增删改查，虽然心里面是这么想的，但是身体还是蛮老实的自己开始动了起来 其实先完成HTML+CSS部分这个不难，但是虽说不难但是我花了点时间而且犯了一个根本性的错误那就是表格里面的数据都是要动态生成的而不是自己写上去了，然后心里面一整乱吼，重写！！。

在这里插入代码片var data =[{"name":"jike","sex":"男","age":17,"phone":18086297713,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2013.02.18"},  	{"name":"jike1","sex":"女","age":16,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2012.02.18"},{"name":"jike2","sex":"男","age":18,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2008.02.18"},{"name":"jike3","sex":"女","age":60,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2006.02.18"},{"name":"jike4","sex":"男","age":20,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2009.02.18"},{"name":"jike5","sex":"女","age":13,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2013.02.18"},{"name":"吴优","sex":"男","age":10,"phone":383843844944,"jiguan":"湖北孝感","jianjie":"一只单身狗","time":"2020.06.06"}
]
像这样写成对象形式		     
全选 
名字
性别
年龄
手机号
籍贯
简介
入职时间
操作
 ------这里是HTML部分的东西实在的下面这种让页面生成数据显示到页面的方法真的如醍醐灌顶，焕然一新，原来还有这种操作。     	
function wendang(){ div1.innerHTML="";selectALL.checked = false;for(let i=0; i
${data[i].name}
${data[i].sex}
${data[i].age}
 
${data[i].phone}
${data[i].jiguan}
${data[i].jianjie}
${data[i].time}
 修改删除
` 	       }下面的正戏增删改查什么的 很多都是同学的灵感  自己真的想不上去 对了还有老师的不懈努力跟我改了一个半小时的BUG.## 完整的JS代码
var data =[{"name":"jike","sex":"男","age":17,"phone":18086297713,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2013.02.18"},  	{"name":"jike1","sex":"女","age":16,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2012.02.18"},{"name":"jike2","sex":"男","age":18,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2008.02.18"},{"name":"jike3","sex":"女","age":60,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2006.02.18"},{"name":"jike4","sex":"男","age":20,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2009.02.18"},{"name":"jike5","sex":"女","age":13,"phone":18086542687,"jiguan":"湖北武汉","jianjie":"一个好人","time":"2013.02.18"},{"name":"吴优","sex":"男","age":10,"phone":383843844944,"jiguan":"湖北孝感","jianjie":"一只单身狗","time":"2020.06.06"}
]
var all = document.getElementById("all");
var div1 =document.getElementsByClassName("div1")[0];
var ul=document.getElementsByClassName("ul1");
var a1=document.getElementsByClassName("a1");
var a2=document.getElementsByClassName("a2");
var a3=document.getElementById("a3");
var push=document.getElementsByClassName("push")[0];
var change=document.getElementById("change");
var clear=document.getElementsByClassName("clearbtn")[0];
var del=document.getElementById("delete"); 
var chbs = div1.getElementsByTagName("input");
var selectALL = ul[0].getElementsByTagName("input")[0];
var children=push.children;
var newchildren=[];
//增加
var jia=document.getElementsByClassName("jia")[0];
var insert=document.getElementsByClassName("insert")[0];
var change1=document.getElementById("change1");
var clearbtn2=document.getElementsByClassName("clearbtn2")[0];
var a4=document.getElementById("a4");
var children1=jia.children;
var newChildren=[];for(let j=0;j
${data[i].name}
${data[i].sex}
${data[i].age}
 
${data[i].phone}
${data[i].jiguan}
${data[i].jianjie}
${data[i].time}
 修改删除
` 	       }//删除    for(let i=0; ili input:not(:checked");   	    var sum = 0;for(var j = 0;jli input:not(:checked");   	    var sum = 0;for(var j = 0;j

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！