JS学生表格页面 当用户单击删除链接时 可以删除整行
时间: 2024-10-19 22:05:26 浏览: 0
在JavaScript中,为了实现这样的功能,你通常会在HTML页面上创建一个包含学生信息的表格,并为每一行添加一个"删除"链接。当用户点击这个链接时,会触发一个事件处理器(如`onclick`事件),在这个处理器中,你可以编写删除操作的逻辑。
首先,在HTML部分,可以这样设置:
```html
<table id="studentTable">
<tr>
<!-- 表格列 -->
<td>学号</td>
<td>姓名</td>
<td><a href="#" class="deleteLink">删除</a></td>
</tr>
<!-- 更多行... -->
</table>
```
然后,你需要编写JavaScript代码,比如使用`event.preventDefault()`阻止默认的链接跳转,并利用`rowIndex`从DOM元素中获取当前行的数据,接着通过AJAX或其他合适的方式向服务器发送请求删除数据:
```javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取所有删除链接
var deleteLinks = document.querySelectorAll('.deleteLink');
deleteLinks.forEach(function(link, index) {
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认行为
// 获取当前行的信息
var rowIndex = index; // 或者从链接或父元素中获取
var dataToRemove = getStudentData(rowIndex); // 自定义函数获取对应行数据
confirmDelete(dataToRemove, rowIndex); // 弹出确认框,如果用户同意,则删除
});
});
});
// 模拟确认删除并执行删除操作的函数
function confirmDelete(data, rowIndex) {
if (confirm("确定删除第 " + rowIndex + " 行的学生吗?")) {
// 发送删除请求到服务器,例如使用fetch API
fetch('/api/students/' + rowIndex, { method: 'DELETE' })
.then(response => response.json())
.then(() => removeRow(rowIndex))
.catch(error => console.error('Error:', error));
}
}
// 删除指定行的函数
function removeRow(rowIndex) {
// 从表格中移除行,例如使用DOM操作
var table = document.getElementById('studentTable');
table.deleteRow(rowIndex);
}
```
阅读全文