HTML 实现带删除功能的打卡表格：附代码与注意要点

以下是一个使用 HTML 和 JavaScript 实现的带有序号、日期和上下班打卡时间的表格，并具备删除行功能的示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打卡表格</title> </head> <body> <table id="myTable"> <tr> <th>序号</th> <th>日期</th> <th>上班打卡</th> <th>下班打卡</th> <th>操作</th> </tr> </table> <script> // 生成表格数据 let data = [ { id: 1, date: '2023-10-01', start: '09:00', end: '18:00' }, { id: 2, date: '2023-10-02', start: '08:30', end: '17:30' } ]; // 渲染表格 for (let item of data) { let row = document.createElement('tr'); row.innerHTML = `<td>${item.id}</td><td>${item.date}</td><td>${item.start}</td><td>${item.end}</td><td><button onclick="deleteRow(this)">删除</button></td>`; document.getElementById('myTable').appendChild(row); } // 删除行的函数 function deleteRow(button) { let row = button.parentNode.parentNode; row.parentNode.removeChild(row); } </script> </body> </html> ``` 额外需要注意的逻辑点： 1. 数据的存储和获取方式，这里只是简单模拟了数据，实际应用中可能需要从数据库或其他数据源获取。 2. 删除操作的确认提示，以防止误删。 3. 考虑对表格进行排序和搜索等功能的扩展。 ######[AI写代码神器 | 494点数解答 | 2024-11-28 09:35:15]

服务商

更多选项

快捷项

自定义