原生 JS 与 ECMA 高级语法打造可增删改状态的品牌列表

以下是一个使用原生 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> <input type="text" id="brandName" placeholder="输入品牌名称"> <button id="addBtn">添加</button> <table border="1" id="brandTable"> <tr> <th>行号</th> <th>品牌名称</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </table> <script> // 定义一个类来表示品牌 class Brand { constructor(name, status, createdAt) { this.name = name; this.status = status; this.createdAt = createdAt; } } // 初始化品牌列表 let brandList = []; // 获取元素 const brandNameInput = document.getElementById('brandName'); const addBtn = document.getElementById('addBtn'); const brandTable = document.getElementById('brandTable'); // 添加品牌的函数 addBtn.addEventListener('click', () => { const name = brandNameInput.value; const status = '已启用'; const createdAt = new Date().toISOString(); const brand = new Brand(name, status, createdAt); brandList.push(brand); renderTable(); brandNameInput.value = ''; }); // 渲染表格的函数 function renderTable() { brandTable.innerHTML = ''; for (let i = 0; i < brandList.length; i++) { const brand = brandList[i]; const row = brandTable.insertRow(); const cell1 = row.insertCell(0); cell1.innerHTML = i + 1; const cell2 = row.insertCell(1); cell2.innerHTML = brand.name; const cell3 = row.insertCell(2); const statusBtn = document.createElement('button'); statusBtn.innerHTML = brand.status; statusBtn.addEventListener('click', () => { if (brand.status === '已启用') { brand.status = '已禁用'; } else { brand.status = '已启用'; } renderTable(); }); cell3.appendChild(statusBtn); const cell4 = row.insertCell(3); cell4.innerHTML = brand.createdAt; const cell5 = row.insertCell(4); const deleteBtn = document.createElement('button'); deleteBtn.innerHTML = '删除'; deleteBtn.addEventListener('click', () => { if (confirm('确定要删除这一行吗？')) { brandList.splice(i, 1); renderTable(); } }); cell5.appendChild(deleteBtn); } } renderTable(); </script> </body> </html> ``` 在上述代码中，我们定义了一个`Brand`类来表示品牌对象，包含品牌名称、状态和创建时间。通过添加按钮添加品牌，点击状态按钮切换状态，点击删除按钮确认后删除行，并重新渲染表格。 ######[AI写代码神器 | 814点数解答 | 2024-11-18 17:17:39]

服务商

更多选项

快捷项

自定义