<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="ipt1" />
<input type="text" id="ipt2" />
<button id="btn">添加</button>
<table>
<thead>
<tr>
<th>学号</th>
<th>学生姓名</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
//实现添加功能
//定义一个空数组用来存放数据
var arr = [];
var btn = document.querySelector("#btn");
btn.onclick = function() {
//点击按钮的时候要干什么事件，要做的事件就写到函数里
var ipt1 = document.querySelector("#ipt1");
var ipt2 = document.querySelector("#ipt2");
//获取输入框的值
var snum = ipt1.value;
var sname = ipt2.value;
//定义对象添加到数组中
var obj = {
num: snum,
name: sname,
};
arr.push(obj);
//调用函数重新加载数组
loadList();
//清楚输入框内容
ipt1.value = "";
ipt2.value = "";
};
//实现删除功能
/* 方法1：使用filter过滤的方法 */
/* function delectClick(snum) {
//根据传递过来的学号值来进行过滤删除
arr = arr.filter(function(v) {
return v.num != snum;
});
loadList();
} */
/* 方法2：使用splice(下标，1) 方法-->通过findIndex查找到要删元素的下标*/
function delectClick(snum) {
var index = arr.findIndex(function(v) {
return v.num == snum;
});
arr.splice(index, 1);
loadList();
}
//采用字符串拼接的方式把数组中的元素放到tbody中
//（将其封装成一个函数便于多次调用）
function loadList() {
var str = "";
arr.forEach(function(v) {
str =
str +
`<tr>
<td>${v.num}</td>
<td>${v.name}</td>
<td><button onclick="delectClick('${v.num}')">删除</button></td>
</tr>`;
});
var tbody = document.querySelector("tbody");
tbody.innerHTML = str;
}
</script>
</body>
</html>
