对象解构,赋值
<style>
.box{
width: 100vw;
height: 100vh;
text-align: center;
}
table,th,td{
text-align: center;
border: 1px solid gray;
border-collapse: collapse;
}
table{
margin:0 auto;
width: 50vw;
height:10vh;
}
</style>
<div class="box">
<div class="div1">
<label for="">姓名:</label>
<input type="text" id="name">
</div>
<div class="div4">
<label for="">性别:</label>
<input type="text" id="xinbie">
</div>
<div class="div2">
<label for="">年龄:</label>
<input type="text" id="age">
</div>
<div class="div5">
<label for="">爱好:</label>
<input type="text" id="aihao">
</div>
<div class="div3">
<label for="" style="visibility: hidden;">提交</label>
<input type="button" value="提交" id="adds">
</div>
<div class="div4">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>我去</td>
<td>女</td>
<td>999</td>
<td>打篮球</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var arr=[
{
}
]
show()
function show(){
var str="";
for(let i=0;i<arr.length;i++){
var {name,xinbie,age,aihao}=arr[i]
str+=`
<tr>
<td>${name}</td>
<td>${xinbie}</td>
<td>${age}</td>
<td>${aihao}</td>
</tr>
`
}
document.getElementById("tbody").innerHTML=str
}
var add=document.getElementById("adds");
add.onclick=function(){
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var xinbie=document.getElementById("xinbie").value;
var aihao=document.getElementById("aihao").value;
arr.push({
name,
xinbie,
age,
aihao
})
show()
}
</script>