要实现点击“删除”链接后弹出确认框,并在用户点击确认后移除对应的一行,可以使用JavaScript来完成这个功能。以下是一个简单的示例: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>删除行示例</title> <style> table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } </style> </head> <body> <table> <thead> <tr> <th>编号</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>项目一</td> <td><a href="javascript:;" onclick="confirmDelete(this)">删除</a></td> </tr> <tr> <td>2</td> <td>项目二</td> <td><a href="javascript:;" onclick="confirmDelete(this)">删除</a></td> </tr> <tr> <td>3</td> <td>项目三</td> <td><a href="javascript:;" onclick="confirmDelete(this)">删除</a></td> </tr> </tbody> </table> <script> function confirmDelete(element) { if (confirm("确定要删除吗?")) { // 获取当前元素所在的行 var row = element.closest('tr'); // 从DOM中移除该行 row.remove(); } } </script> </body> </html> ``` 解释: 1. HTML部分: - 创建一个表格,每行包含一个编号、名称和一个删除链接。 - 删除链接的 `onclick` 事件调用 `confirmDelete` 函数,并传递当前元素(即删除链接)作为参数。 2. CSS部分: - 简单的样式设置,使表格看起来更整洁。 3. JavaScript部分: - `confirmDelete` 函数: - 使用 `confirm` 函数弹出一个确认框,询问用户是否确定要删除。 - 如果用户点击“确定”,则获取当前元素所在的行(使用 `closest('tr')` 方法),并从DOM中移除该行(使用 `remove` 方法)。 这样,当用户点击“删除”链接时,会弹出一个确认框,如果用户点击“确定”,则对应的行会被移除。 [2024-11-18 18:08:45 | AI写代码神器 | 627点数解答]