<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>学生信息页面</title>
<style>
body{background:#fff;margin:0}
.wrap{width:620px;max-width:92vw;margin:60px auto}
table{width:100%;border-collapse:collapse;border:2px solid #333}
th,td{border:1px solid #333;padding:10px 12px;text-align:center}
th{font-weight:700}
a.del{color:#111;text-decoration:none;font-weight:700}
a.del:hover{color:#c00;text-decoration:underline}
</style>
</head>
<body>
<div class="wrap">
<table id="studentTable">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>JavaScript</td>
<td>100</td>
<td><a class="del" href="javascript:;">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>JavaScript</td>
<td>90</td>
<td><a class="del" href="javascript:;">删除</a></td>
</tr>
<tr>
<td>刘五</td>
<td>JavaScript</td>
<td>90</td>
<td><a class="del" href="javascript:;">删除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
const table = document.getElementById('studentTable');
table.addEventListener('click', (e) => {
const a = e.target.closest('a.del');
if (!a) return;
const tr = a.closest('tr');
if (tr) tr.remove();
});
</script>
</body>
</html>
