![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701184530547.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjE5MDY5,size_16,color_FFFFFF,t_70)
<style>
#box{
width: 800px;
height: 300px;
margin: 50px auto;
border: 1px solid;
}
#box .box2{
height: 25px;
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
#box .box2 input:nth-child(5){
width: 80px;
}
#tab{
width: 100%;
border: 1px solid red;
text-align: center;
}
#tab th{
border: 1px solid red;
}
#tab td{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box">
<div class="box2">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="text" value="">
<input type="button" value="添加">
</div>
<div>
<table id="tab">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
<th>操作</th>
</tr>
</table>
</div>
</div>
<script>
var box2=document.querySelector(".box2")//获取box2
var inputs=box2.children; //获取box2所有的孩子
var tab=document.querySelector("#tab")
//给按钮绑定事件
inputs[4].onclick=function(){
for(var i=0;i<inputs.length;i++){ //为空时不能输入,需要判断四个input框,所以用个遍历
if(inputs[i].value==""){
alert("不能为空,小老弟")
return false
}
}
//在tab中添加行和列
var tr=document.createElement("tr") //要先创建一个子节点
tab.appendChild(tr) //再添加到父节点下
//添加列,顺便把input获取的值付给它,注意innerHTML
var td1=document.createElement("td")
td1.innerHTML=inputs[0].value
tr.appendChild(td1)
var td2=document.createElement("td")
td2.innerHTML=inputs[1].value
tr.appendChild(td2)
var td3=document.createElement("td")
td3.innerHTML=inputs[2].value
tr.appendChild(td3)
var td4=document.createElement("td")
td4.innerHTML=inputs[3].value
tr.appendChild(td4)
var td5=document.createElement("td")
td5.innerHTML="<span>删除</span>"
tr.appendChild(td5)
var span=document.querySelectorAll("span")
for(var i=0;i<span.length;i++){
span[i].onclick=function(){ //要删除添加的某一个span
this.parentNode.parentNode.remove() //删除它父元素的父元素,事件在循环内部
}
}
clear()
}
function clear(){
for(var i=0;i<inputs.length-1;i++){
inputs[i].value=""
}
}
</script>
</body>
</html>