新增操作按钮:“删除”。勾选1行或多行项目信息,点击“删除”按钮,从列表中移所选项目信息。 前端代码实现一下
时间: 2024-09-18 13:13:26 浏览: 27
在前端使用HTML、CSS和JavaScript实现这样的"删除"功能,你可以参考以下步骤:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.list-item {
cursor: pointer;
}
.delete-button {
display: none; /* 初始隐藏 */
}
</style>
</head>
<body>
<table id="itemTable">
<thead>
<tr>
<!-- 其他列... -->
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 每一行数据,例如 -->
<tr class="list-item" data-id="1">
<td>...</td>
<td><input type="checkbox" name="remove[]" value="1"></td>
<td><button class="delete-button">删除</button></td>
</tr>
<!-- ...更多行... -->
</tbody>
</table>
<script>
// 获取表格元素及操作按钮
const table = document.getElementById('itemTable');
const deleteButtons = table.querySelectorAll('.delete-button');
// 给每一行的复选框绑定事件处理函数
const checkboxes = table.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
if (this.checked) {
this.parentNode.querySelector('.delete-button').style.display = 'inline-block'; // 显示删除按钮
} else {
this.parentNode.querySelector('.delete-button').style.display = 'none'; // 隐藏删除按钮
}
});
});
// 点击删除按钮的事件处理函数
deleteButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault(); // 阻止默认提交表单的行为
// 获取被选中的项目ID
const selectedRow = e.target.parentNode;
const itemId = selectedRow.dataset.id;
// 在这里添加删除逻辑,比如异步发送请求到服务器删除该条数据
// 示例:
deleteItem(itemId);
});
});
// 删除操作的具体实现(这通常在服务器端完成,这里仅作示例)
function deleteItem(itemId) {
fetch(`/api/delete/${itemId}`, { method: 'DELETE' })
.then(response => response.json())
.then(data => {
if (data.success) {
// 更新UI,如从列表中移除该项目
removeRowFromList(itemId);
} else {
alert('删除失败,请稍后再试');
}
})
.catch(error => console.error('Error deleting item:', error));
}
// 私有方法:从列表中移除特定项目的行
function removeRowFromList(itemId) {
// 找到对应行并移除它...
}
</script>
</body>
</html>
```
这段代码首先设置了每行的数据项,当用户勾选复选框时显示删除按钮。点击删除按钮时,会触发`deleteItem`函数,通过异步请求向服务器发送删除请求。注意实际生产环境中,你需要将删除逻辑放在服务器端,并可能需要额外的权限验证。