1.功能
1.添加成员信息
2.删除成员信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: red;
}
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>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:;">删除</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 默认数据
let arr = [{
stuId: 1001,
uname: "欧阳霸天",
age: 19,
gender: "男",
salary: "20000",
city: "上海",
},
];
// 1.添加按钮 将表单的数据放在数组里面
// 2.获取表单的内容
// 3.将数据追加到arr 数组中
// 4.遍历数组 生成html
// 5.将拼接好的 字符串 显示在(innerhtml)页面中
// 6.删除 (参考事件委托) 找到儿子 给他父亲处理
// 6 删除方法2 从数组里删除 需要重新遍历数组 需要封装一个遍历方法
// 1
let add = document.querySelector(".add")
// 2
add.addEventListener("click", function () {
let uname = document.querySelector(".uname").value
let age = document.querySelector(".age").value
let gender = document.querySelector(".gender").value
let salary = document.querySelector(".salary").value
let city = document.querySelector(".city").value
// push
arr.push({
// 找到数组的长度 小标 因为有一个 所以减一 但是最后数+1(只是更改的数组)
// 需要修改数组的重新遍历stuid 更改在页面中
stuId:arr[arr.length-1].stuId+1,
uname: uname,
age: age,
gender: gender,
salary: salary,
city: city,
})
// 4字符串 拼接
// 遍历的方法
render()
})
// 封装的 遍历函数
function render(h) {
console.log(arr);
let htmlStr = ""
for (let i = 0; i < arr.length; i++) {
htmlStr += `
<tr>
<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 id="${i}" class="shanchu" href="javascript:;">删除</a>
</td>
</tr>
`
}
// console.log(htmlStr);
// 5.显示在 页面中
tbody.innerHTML = htmlStr
}
// 6删除 1 这个删除又 bug :删除的数组还在
// tbody.addEventListener("click",function(e){
// if(e.target.classList.contains("shanchu")){
// // 为什么是e.target.parentNode.parentNode?
// tbody.removeChild(e.target.parentNode.parentNode)
// console.log(11);
// }
// })
// 6.新删 除(2) 在数组里面删除 使用splice 获得下标
// 6-1 在删除+id
let tbody = document.querySelector("tbody")
tbody.addEventListener("click", function (e) {
if (e.target.classList.contains("shanchu")) {
//
// console.log(111);
// console.log(e.target.id);
arr.splice(e.target.id, 1) //数组里的东西已经被删除了,需要重新遍历数组
// 再次遍历数组 所以 要封装一个遍历的函数
render()
}
})
</script>
</body>
</html>
效果如下:
1
2.添加成员效果
3.删除效果