1、给表格设置样式
2、表格布局
3、let sex=document.getElementById('sex');
let btn=document.getElementById('btn');
var ipt=document.querySelectorAll('input');
var tbody=document.querySelector('.tbody');
var arr=[];
btn.onclick=function(){
let stus={name:ipt[0].value,age:ipt[1].value,sex:sex.value,phone:ipt[2].value}; arr.push(stus);
let tr='';/*以拼接的形式添加,里面的内容相当于字符串*/
arr.forEach((item,index)=>{ /*箭头函数*/
tr += '<tr>'+
'<td>'+item.name+'</td>'+
'<td>'+item.age+'</td>'+
'<td>'+item.sex+'</td>'+
'<td>'+item.phone+'</td>'+
"<td onclick='del("+index+")'>删除</td>"+
'</tr>'; /*字符拼接式的标签*/
});
tbody.innerHTML=tr;
}
function del(index){
console.log(index);/*点击直接获取到这个td的父级tr的索引值*/
arr.splice(index,1);
console.log(arr);
var tr=document.querySelectorAll('.tbody tr');
tbody.removeChild(tbody.childNodes[index]);/*第一种做法,这个不行有bug*/
}
4、最后给大家看看成果图