巧用 JavaScript 实现点击“删除”弹出确认框并移除对应表格行

要实现点击“删除”链接后弹出确认框，并在用户点击确认后移除对应的一行，可以使用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` 方法）。这样，当用户点击“删除”链接时，会弹出一个确认框，如果用户点击“确定”，则对应的行会被移除。 ######[AI写代码神器 | 627点数解答 | 2024-11-18 18:08:45]

服务商

更多选项

快捷项

自定义