原生 JS 与 ECMAScript 高级语法：实现表格行添加与删除功能

以下是一个使用原生 JavaScript 和 ECMAScript 高级语法实现上述需求的示例代码： ```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> <button id="addBtn">添加</button> <table id="myTable"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> // 获取相关元素 const addBtn = document.getElementById('addBtn'); const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0]; // 点击添加按钮添加新行 addBtn.addEventListener('click', () => { const newRow = tableBody.insertRow(); const nameCell = newRow.insertCell(0); const ageCell = newRow.insertCell(1); const timeCell = newRow.insertCell(2); const actionCell = newRow.insertCell(3); nameCell.innerHTML = `<input type="text" />`; ageCell.innerHTML = `<input type="number" />`; timeCell.innerHTML = `<input type="datetime-local" />`; actionCell.innerHTML = `<button class="deleteBtn">删除</button>`; }); // 为删除按钮添加点击事件 tableBody.addEventListener('click', (event) => { if (event.target.classList.contains('deleteBtn')) { if (confirm('确定要删除这一行吗？')) { const row = event.target.parentNode.parentNode; tableBody.removeChild(row); } } }); </script> </body> </html> ``` 在上述代码中，我们使用了原生的 JavaScript 来实现添加和删除表格行的功能。当点击添加按钮时，会在表格中添加新的一行并包含输入框。当点击删除按钮时，会弹出确认框，确认后删除对应的行。 ######[AI写代码神器 | 541点数解答 | 2024-11-12 15:58:18]

服务商

更多选项

快捷项

自定义