请编写一个图7-34所示的学生信息页面,当用户单击“删除”链接时,可以删除整行。姓名 科目 成绩 操作 张三 JavaScript 100 删除 李四 JavaScript 90 删除 RWNO8 刘
时间: 2024-10-17 12:09:19 浏览: 4
在创建一个显示学生信息并支持删除功能的网页时,我们可以使用HTML、CSS以及JavaScript来实现。下面是一个简单的示例,展示了如何构造这样一个页面:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: #f5f5f5;}
.delete-button {
background-color: red;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<table id="studentTable">
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
<!-- 使用JavaScript动态添加数据 -->
<tr>
<td>张三</td>
<td>JavaScript</td>
<td>100</td>
<td><a href="#" class="delete-button" onclick="deleteStudent(this)">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>JavaScript</td>
<td>90</td>
<td><a href="#" class="delete-button" onclick="deleteStudent(this)">删除</a></td>
</tr>
<!-- 更多行... -->
</table>
<script>
function deleteStudent(link) {
var row = link.parentNode.parentNode;
row.remove();
}
</script>
</body>
</html>
```
在这个例子中,我们首先创建了一个表格`<table>`,其中包含表头和两行示例学生数据。每个学生的数据后面都有一个带有`delete-button`类的删除链接,点击这个链接会触发`deleteStudent`函数,该函数通过JavaScript获取到当前行元素,并调用其`remove()`方法将其从表格中移除。
注意:这只是一个基本示例,实际应用中可能需要连接数据库并在服务器端处理删除操作,以确保安全性。
阅读全文