报名系统(篮球比赛/户籍系统)等等
<!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>
<style>
table {
border-collapse: collapse;
}
table th,
td {
padding: 4px 8px;
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- 表单 -->
<h1>篮球赛报名系统</h1>
<p>姓名：<input type="text" id="input1" /></p>
<p>年龄：<input type="text" id="input2" /></p>
<p>身高：<input type="text" id="input3" /></p>
<p>电话：<input type="text" id="input4" /></p>
<button id="btn">立即报名</button>
<hr />
<!-- table -->
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>身高</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>188</td>
<td>1888888888</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<script>
// 功能一：输入内容后，根据内容新增表格条目
// 1.获取相关节
function $(selector) {
return document.querySelector(selector);
}
// $("#input1");
// $("#input2");
// $("#input3");
// 2.给button绑定点击事件
$("#btn").addEventListener("click", function () {
console.log("111");
// 3.获取输入框的值
// $('#input1').value
// $('#input2').value
// 4.将值拼接为HTML结构<tr></tr>
let html = `<tr>
<td>${$("#input1").value}</td>
<td>${$("#input2").value}</td>
<td>${$("#input3").value}</td>
<td>${$("#input4").value}</td>
<td><button>删除</button></td>
</tr>`;
// 5.将拼接的结构放入tbody里
// console.log($("tbody").innerHTML);
// $("tbody").innerHTML = $("tbody").innerHTML + html;
$("tbody").innerHTML += html;
});
// 功能二：点击删除，删除当前行
// 1.获取相关节点 table
// $("table");
// 2.给table绑定点击事件
$("table").addEventListener("click", function (e) {
console.log(e.target.nodeName);
// 3.通过事件对象event反查事件源event.target的相关属性nodeName === BUTTON时才触发点击效果
if (e.target.nodeName === "BUTTON") {
// 4.删除button的父亲的父亲，也就是所在行tr， remove
e.target.parentNode.parentNode.remove();
}
});
</script>
</body>
</html>
报名系统(篮球比赛/户籍系统)等等报名系统(篮球比赛/户籍系统)等等
推荐阅读：
扫描二维码，在手机上阅读