原生 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> <h2>品牌列表</h2> <table id="brandTable"> <thead> <tr> <th>#</th> <th>品牌名称</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <button id="addBtn">添加</button> <script> // 获取表格和添加按钮 const table = document.getElementById('brandTable').getElementsByTagName('tbody')[0]; const addBtn = document.getElementById('addBtn'); // 初始化行号 let rowNumber = 1; // 添加行函数 addBtn.addEventListener('click', () => { const newRow = table.insertRow(); const cell1 = newRow.insertCell(0); const cell2 = newRow.insertCell(1); const cell3 = newRow.insertCell(2); const cell4 = newRow.insertCell(3); const cell5 = newRow.insertCell(4); cell1.innerHTML = rowNumber; cell2.innerHTML = `<input type="text" />`; cell3.innerHTML = `<select><option value="active">活跃</option><option value="inactive">不活跃</option></select>`; cell4.innerHTML = new Date().toISOString(); cell5.innerHTML = `<button class="deleteBtn">删除</button>`; rowNumber++; }); // 为删除按钮添加点击事件 table.addEventListener('click', (event) => { if (event.target.classList.contains('deleteBtn')) { if (confirm('确定要删除这一行吗？')) { const row = event.target.parentNode.parentNode; table.deleteRow(row.rowIndex); } } }); </script> </body> </html> ``` 在上述代码中，实现了点击添加按钮添加新行，点击删除按钮出现确认框并根据确认结果删除行的功能。创建时间使用了`new Date().toISOString()`获取当前时间。 ######[AI写代码神器 | 602点数解答 | 2024-11-18 18:03:43]

服务商

更多选项

快捷项

自定义