js请编写一个图所示的学生信息界面,当用户单击删除链接时可以删除整行
时间: 2024-03-01 12:50:10 浏览: 62
很抱歉,由于我是一个纯文本AI语言模型,无法生成图形化界面。但我可以为你提供一份基本的HTML和JavaScript代码,供您参考。您可以在其中添加样式和其他功能以满足您的需求。
HTML代码:
```
<table id="student-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
<td><a href="#" class="delete-row">删除</a></td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
<td><a href="#" class="delete-row">删除</a></td>
</tr>
<tr>
<td>王五</td>
<td>21</td>
<td>男</td>
<td><a href="#" class="delete-row">删除</a></td>
</tr>
</tbody>
</table>
```
JavaScript代码:
```
// 获取所有删除链接
var deleteLinks = document.querySelectorAll('.delete-row');
// 遍历所有链接并添加点击事件
deleteLinks.forEach(function(link) {
link.addEventListener('click', function(event) {
// 阻止默认事件(即点击链接时跳转页面)
event.preventDefault();
// 获取被点击链接所在的行
var row = link.parentNode.parentNode;
// 删除该行
row.parentNode.removeChild(row);
});
});
```
这段代码创建了一个包含学生信息的表格,并为“删除”链接添加了一个点击事件,当用户单击链接时可以删除整行。您可以将代码复制并粘贴到您的HTML文件和JavaScript文件中,并根据需要进行修改。