需求：
构建一个学生就业信息录入页面，在文本输入框中填写信息后，点击“ 录入”按钮，下方表格增加出对应信息，点击删除按钮时，删除该行信息。
分析：
1.声明数组，用于存放用户输入的数据
2.封装表格根据数组渲染页面的函数
3.给'录入'按钮绑定点击事件
3.1 用户输入数据插入数组
3.2 调用函数
3.3 清空输入框
4 绑定点击删除事件
4.1、设置事件委托，给父元素添加事件
4.2 、确认e.target.nodeName元素
4.2、spalice删除对应下标数组
html&css：
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #721c24;
}
h1 {
text-align: center;
color: #333;
margin: 20px 0;
}
table {
margin: 0 auto;
width: 800px;
border-collapse: collapse;
color: #004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,
th {
border: 1px solid #b8daff;
}
td {
padding: 10px;
color: #666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border: 1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
</style>
</head>
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname" /> 年龄：<input
type="text"
class="age"
/>
性别:
<select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" /> 就业城市：<select
name="city"
id=""
class="city"
>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
</table>
js代码：
let arr=[]
let tbody=document.querySelector('tbody')
let add=document.querySelector('.add')
let uname =document.querySelector('.uname')
let age=document.querySelector('.age')
let gender=document.querySelector('.gender')
let salary=document.querySelector('.salary')
let city=document.querySelector('.city')
add.addEventListener('click',function(){
// 创建动态对象
let data= {
numId:Date.now(),
// 名字
uname:uname.value,
// 年龄
age:age.value,
// 性别
sex:gender.value,
// 薪资
salary:salary.value,
// 城市
city:city.value
}
// 对象插入数组
arr.push(data)
// 动态渲染函数调用
renderTableByArr()
// 数组清空
uname.value=" "
age.value =" "
gender.value ="男"
salary.value=" "
city.value="北京"
})
// 设置事件委托
tbody.addEventListener('click',function(e){
// console.log(e.target) //确认被点击元素
if(e.target.nodeName==='A'){
let index =e.target.dataset.index
// console.dir(event.target.dataset.index)
arr.splice(index,1)
console.log(arr)
renderTableByArr()
}
})
// 动态渲染函数
function renderTableByArr(){
let Html=''
for (let index = 0; index < arr.length; index++) {
Html+=`<tr>
<td>${arr[index].numId}</td>
<td>${arr[index].uname}</td>
<td>${arr[index].age}</td>
<td>${arr[index].sex}</td>
<td>${arr[index].salary}</td>
<td>${arr[index].city}</td>
<td>
//设置自定义data-index="${index}"属性，生成需要的对应id
<a data-index="${index}" href="javascript:" class="del">删除</a>
</td>
</tr> `
}
tbody.innerHTML=Html
}
