<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table,
tr,
th,
td {
border: 1px solid #ccc;
}
tr {
height: 40px;
}
table {
border-collapse: collapse;
width: 630px;
text-align: center;
margin: 20px auto;
}
thead {
background-color: yellowgreen;
}
fieldset {
width: 600px;
margin: 0 auto;
}
input {
height: 20px;
}
</style>
</head>
<body>
<fieldset name="学生录入系统">
<legend>学员录入系统</legend>
<p>
<label>姓名：<input type="text" name=""></label>
</p>
<p>
<label>年龄：<input type="text" name=""></label>
</p>
<p>
<label>性别：<select id="sex">
<option>男</option>
<option>女</option>
</select></label>
</p>
<p>
<label>手机：<input type="text" name=""></label>
</p>
<p>
<button id="but">确认提交</button>
</p>
</fieldset>
<!-- 第二部分：信息展示 -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机</th>
<th>删除</th>
</tr>
</thead>
<tbody class="tbody">
<!-- <tr>
<td>张三</td>
<td>18</td>
<td>男</td>
<td>15511111111</td>
<td>删除</td>
</tr> -->
</tbody>
</table>
<script>
// 逻辑：1.添加信息并展示 2.删除操作
// 先把数据push到一个数组当中，然后对数组进行遍历（对tr的循环，拼接之后，赋值给tbody的innerHTML）
let sex = document.getElementById('sex')
let but = document.getElementById('but')
let input = document.getElementsByTagName('input')
let tbody = document.getElementsByTagName('tbody')[0]
let stus = []
// 提交 拼接一个对象，作为数组的元素
but.onclick = function () {
let obj = { name: input[0].value, age: input[1].value, sex: sex.value, phone: input[2].value };
stus.push(obj);
console.log(stus);
// 2.对数组进行遍历
let tr = '';
stus.forEach((item, index) => {
tr += "<tr class='newTr'>" +
"<td>"+item.name+"</td>" +
"<td>"+item.age+"</td>" +
"<td>"+item.sex+"</td>" +
"<td>"+item.phone+"</td>" +
"<td onclick='del("+index+")'>删除</td>" +
"</tr>";
});
tbody.innerHTML = tr;
}
// 3.删除操作
function del(index){
// 3.1 删除数组中的这条信息
stus.splice(index,1);
// 3.2 删除DOM元素
// tbody.removeChild(该条信息的tr);
let res = document.getElementsByClassName('newTr')[index];
tbody.removeChild(res);
}
</script>
</body>
</html>
