样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>学生信息管理</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<form action="">
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" class="form-control" />
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="text" id="age" class="form-control" />
</div>
<div class="form-group">
<label for="select">科目</label>
<input type="text" id="select" class="form-control" />
</div>
<button type="button" class="btn btn-primary">提交</button>
<button type="button" class="btn btn-info">重置</button>
</form>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th><input type="checkbox" />全选</th>
<th>姓名</th>
<th>年龄</th>
<th>科目</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td colspan="4">
<button class="btn btn-danger">删除选中行</button>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
<script>
let form = document.querySelector("form");
let input = form.querySelectorAll("input");
let btn = form.querySelectorAll("button");
let table = document.querySelector("table");
let allinp = table.tHead.querySelector("input");
let stuinp = table.tBodies[0].getElementsByTagName("input");
// 这个不能用queryselector,它是静态获取,后面所有新增的都拿不到
let del = table.tFoot.querySelector("button");
//提交事件
btn[0].onclick = function () {
let tr = document.createElement("tr");
tr.innerHTML = `<tr>
<td><input type="checkbox"></td>
<td>${input[0].value}</td>
<td>${input[1].value}</td>
<td>${input[2].value}</td>
</tr>`;
table.tBodies[0].appendChild(tr);
reset();
//反选,必须要写在添加事件里面,写在外面的话页面执行时没有input,就没有点击事件的添加
for (let i = 0; i < stuinp.length; i++) {
stuinp[i].onclick = function () {
let tag = true;
for (let i = 0; i < stuinp.length; i++) {
tag &= stuinp[i].checked;
}
allinp.checked = tag;
};
}
};
//重置方法
function reset() {
for (let i = 0; i < input.length; i++) {
input[i].value = "";
}
}
//重置事件
btn[1].onclick = function () {
reset();
};
//全选
allinp.onclick = function () {
for (let i = 0; i < stuinp.length; i++) {
stuinp[i].checked = allinp.checked;
}
};
//删除
del.onclick = function () {
for (let i = 0; i < stuinp.length; i++) {
if (stuinp[i].checked) {
stuinp[i].parentNode.parentNode.remove();
i--;
}
//元素删除完了之后,下标会-1,所以要重新判断i是否选中,要么i--,要么重新获取stuinp类数组
}
};
</script>
</html>