思路：
1.获取DOM 元素
2.声明全局变量arr, 用于存储
3.调用函数
4，按钮产生事件
5，字面量创建
6.arr.push() 插入成功
7.function 进行渲染
8.创建一个 空字符，进行for循环；进行赋值，将拼接好的字符串，传入到table 中
9,运用函数删除，及全部删除即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box>div{
margin: 20px;
}
table{
width: 80%;
text-align: center;
border-collapse: collapse;
}
tr>th,tr>td{
border: solid 1px;
}
.btn{
width: 220px;
text-align: right;
}
</style>
</head>
<body>
<div class="box">
<div>
<label>
姓名：<input type="text" class="username">
</label>
</div>
<div>
<label>
年龄：<input type="text" class="age">
</label>
</div>
<div>
<label>
性别：<input type="text" class="sex">
</label>
</div>
<div>
<label>
标识：<input type="text" class="idCard">
</label>
</div>
<div class="btn">
<button type="button">添加</button>
<button type="button">全部删除</button>
</div>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>id</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>张三</td>
<td>118</td>
<td>男</td>
<td>1</td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
//1.获取dom元素
var username=document.querySelector(".username")
var age=document.querySelector(".age")
var sex=document.querySelector(".sex")
var id=document.querySelector(".idCard")
var tbody=document.querySelector('tbody')
var btn=document.querySelectorAll("button")
//2.声明全局的arr，用于数组的存储
var arr=[
{name:"张三",age:"90",sex:"18",id:"1"},
{name:"王五",age:"90",sex:"18",id:"2"},
{name:"李四",age:"90",sex:"18",id:"3"}
]
//调用渲染函数：在页面初始化完成后（防止arr数据的数组
showArr()
//添加事件
btn[0].onclick=function(){
//获取输入的内容
//console.log(username.value+age.value+sex.value+id.value)
//字面量创建对象，直接赋值
var obj={
name:username.value,
age:age.value,
sex:sex.value,
id:id.value
}
//将成组的数组存储到数组当中
arr.push(obj)
console.log(arr)
//添加数组成功，数组发生改变，重新渲染页面
showArr()
}
//渲染
function showArr(){
//创建str，拼接循环内的数据
var str=''
//循环处理数据
for(var i=0;i<arr.length;i++){
//赋值方便后续操作
var obj=arr[i]
//将每一数据当中的属性值拼接成字符串，拼接完成后，插入到table中
str+=`
<tr>
<td>${obj.name}</td>
<td>${obj.age}</td>
<td>${obj.sex}</td>
<td>${obj.id}</td>
<td><button type="button" onclick='delData(${obj.id})'>删除</button></td>
</tr>`
}
//将拼接好的str插入到tbody中
tbody.innerHTML=str
}
//删除
function delData(id){
for(var i=0;i<arr.length;i++){
if(arr[i].id==id){
arr.splice(i,1)
}
//数组发生改变，重新渲染页面
showArr()
}
}
//全部删除
btn[1].onclick=function(){
arr=[]
showArr()
}
</script>
</body>
</html>
![DOM下元素 offset client scroll 相关属性简介[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)