思路： 一：实现数据渲染 （封装函数 init（））
1.生成一个空字符串（为后面进行数据拼接）
2.遍历js后端数据内容（改数据内容）
3.把生成的数据内容，赋值到元素页面里去
二：实现数据的新增
为录入键绑定单击事件
1.把你需要新增的数据，生成一个新对象
2.将生成的新对象追加到数组 .push()
3.渲染（调用前面的封装函数init（））
三.实现数据删除 - 动态渲染的元素，用事件委托（绑定父元素，让子元素去触发）
1.e.target表示当前用户单击的元素 e为事件对象，要拿到索引号（根据id找到对应的索引），先存值再取值
2.删除数据（删除数组数据splice）
3.渲染（调用封装函数initial（））
4.最后的2.3for循环做法可以换为用filter遍历（筛选过滤数组） 如：return id !=v.stuId返回没被删除掉的新数据
遇到的bug：
1.获取不到姓名、年龄和薪资数据内容
解决方案:单击之后再获取数据内容，并不是直接获取页面内容，因为获取比单击早执行
2.页面删除完，页面元素为空时，无法再录入新数据
解决方案:当页面元素为0的时候，此时的数组长度为-1无法获取到id号，用三元表达式手动给赋值一个id号为1001
3.不知道如何准确删除想删除的那一行数据
解决方案:获取索引号，在删除键那先存值，再取值。再用filter循环遍历去筛选出新数组
<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>
<script>
// 1. 准备好数据后端的数据
let arr = [
{
stuId: 1001,
uname: '张三',
age: 22,
gender: '男',
salary: '20000',
city: '广州'
},
{
stuId: 1002,
uname: '李四',
age: 22,
gender: '男',
salary: '20000',
city: '广州'
},
{
stuId: 1003,
uname: '王五',
age: 22,
gender: '男',
salary: '20000',
city: '广州'
}
]
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')
// 一.数据渲染 封装函数init()
function init() {
// 1.声明一个空字符串，进行数据拼接
let str = ''
//2.遍历后台数据，进行内容数据渲染
arr.forEach(function (v, i) {
str += ` <tr>
<td>${i + 1}</td>
<td>${v.uname}</td>
<td>${v.age}</td>
<td>${v.gender}</td>
<td>${v.salary}</td>
<td>${v.city}</td>
<td>
<a href="javascript:" class="del" id="${v.stuId}">删除</a>
</td>
</tr>`
})
//3.渲染内容（将字符串赋值到页面标签）
tbody.innerHTML = str
}
init() //调用函数
// 二.增加数据 ,绑定录入按钮的单击事件
add.addEventListener('click', function () {
// 1.创建一个空的对象，把需要的数据增加进去
let obj = {
//追加的数据都是在最后面追加的，所有id号应该是现有的最后一个id号+1
stuId: arr.length > 0 ? arr[arr.length - 1].stuId + 1 : 1001, //当页面元素为0的时候，id号为1001
uname: uname.value, //单击之后再录入用户所填的数据
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value
}
// 2.将生成的新对象追加到后台数据数组里去.push()
arr.push(obj)
// 3.渲染（调用函数）
init()
//单击录入按钮后，清空填入的数据内容
uname.value = null,
age.value = null,
salary.value = null
})
// 三.数据删除 动态渲染的元素(新增的元素,未来的元素)的事件绑定需要使用事件委托
// 事件委托：将事件绑定给父容器。让子元素来触发 e为事件对象
tbody.addEventListener('click', function (e) { //因为删除键有很多个，不可能遍历然后一个个去绑定
if (e.target.className == 'del') { // e.target用户当前单击的元素 .className的类名
//获取当前你想删除的数据的id
let id = e.target.id //拿到当前被点击的删除号的id号（先前已经存好了） 先存值，再取值
arr = arr.filter(function (v, i) { //筛选过滤数组
return id != v.stuId //返回没被删除掉的新数据
})
}
init()
})
</script>
</body>
