目录
一、功能说明
（1）输入对应的信息，点击录入可以为下面的表格添加一条记录，注意当所填信息不完整时不允许进行提交。
（2）当点击删除记录的时候，对应的数据会从表中进行删除
二、核心思想
采取减少dom的操作，操作数据的形式，删除增加都是针对于数组
（1）声明一个空的数组
（2）点击录入，根据相关数据，生成都西昂，追加到数组中
（3）根据数组数据渲染页面-表格中的行
（4）点击删除按钮，删除数组中的对应数据
（5）再次根据数组中的数据，渲染页面
三、所用知识回顾
（1）阻止事件的默认行为 e.preventDefault()
（2）给数组增加元素 数组名.push(数据对象)
（3）从数组中删除数据 数组名.splice(从哪开始删，删几个)
（4）如何知道当前点击的是什么标签 e.target.tagName
（5）如何定义自定义属性 在标签中加入data-id='什么' ；用e.target.dataset.id获取自定义属性的id值
（6）如何创建结点 document.createElement（‘元素名’）
（7）如何给父元素追加结点 父元素.appendChild(要插入的元素)其为后插 ；父元素.insertBefore(要插入的元素)其为前插
（8）如何将内容渲染到标签中，用反引号``
四、基本框架
HTML部分
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" />
年龄：<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" name="salary" />
就业城市：<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
</body>CSS部分
* {
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, .info select {
width: 80px;
height: 27px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
box-sizing: border-box;
margin-right: 15px;
}
.info button {
width: 60px;
height: 27px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}五、js功能实现部分
<script>
// 获取表单中的元素
const uname=document.querySelector('.uname')
const age=document.querySelector('.age')
const gender=document.querySelector('.gender')
const salary=document.querySelector('.salary')
const city=document.querySelector('.city')
const tbody=document.querySelector('tbody')
// 获取所有带有name属性的标签
const items=document.querySelectorAll('[name]')
// 声明一个数组
const arr=[]
// 获取表单对象
const info=document.querySelector('.info')
// 监听表单提交事件
info.addEventListener('submit',function(e){
// 阻止表单的默认行为
e.preventDefault()
// 进行表单的验证,不过不通过直接中断,
//方法,利用除了提交都有一个name属性,可以获取name,for循环如果有空则return结束 循环
for(let i=0;i<items.length;i++){
if(items[i].value===''){
return
}
}
// 创建对象，相当于每个学生
const obj={
stuId:arr.length+1,
uname:uname.value,
age:age.value,
gender:gender.value,
salary:salary.value,
city:city.value
}
// 将对象追加给数组
arr.push(obj)
// console.log(arr)
// 提交后清空表单
this.reset()
// // 调用渲染函数
render()
})
// 渲染函数，因为删除和增加都需要渲染
function render(){
// 如果这样写，则每次都会把所有的arr中的数据在原来的基础上又重新加了一次
//则应该每次渲染前把tbody清空
tbody.innerHTML=''
for(let i=0;i<arr.length;i++){
// 每次渲染是多了行，则需要先创建 tr
const tr=document.createElement('tr')
tr.innerHTML=`
<td>${arr[i].stuId}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].age}</td>
<td>${arr[i].gender}</td>
<td>${arr[i].salary}</td>
<td>${arr[i].city}</td>
<td>
<a href="javascript:" data-id='${i}'>删除</a>
</td>
`
// 将tr追加到父元素tbody中
tbody.appendChild(tr)
}
}
// 进行删除操作
//删除在a里面，但是有多个删除，每个都绑定事件麻烦，可以委托给父级元素，唯一可以表示的有tbody
//但是只有点击a的时候才会删除，所有需要if再判断一下点击的哪一个
tbody.addEventListener('click',function(e){
if(e.target.tagName==='A'){
// 如何知道当前想要删除的是哪条数据，可以用自定义属性，在生成a时
// console.log(e.target.dataset.id)
// 删除数组中对应的数据
arr.splice(e.target.dataset.id,1)
// 数组中元素少了则重新 渲染
render()
}
})
</script>