用原生 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> <table id="brandTable"> <tr> <th>#</th> <th>品牌名称</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </table> <button onclick="addBrand()">添加</button> <script> // 品牌数据数组 let brands = [ { name: "Brand 1", status: "Active", createdAt: new Date() }, { name: "Brand 2", status: "Inactive", createdAt: new Date() } ]; // 渲染表格 function renderTable() { let table = document.getElementById('brandTable'); let tbody = table.getElementsByTagName('tbody')[0]; // 清空之前的内容 tbody.innerHTML = ''; for (let i = 0; i < brands.length; i++) { let row = tbody.insertRow(); let cell1 = row.insertCell(0); cell1.innerHTML = i + 1; let cell2 = row.insertCell(1); cell2.innerHTML = brands[i].name; let cell3 = row.insertCell(2); cell3.innerHTML = brands[i].status; let cell4 = row.insertCell(3); cell4.innerHTML = new Date(brands[i].createdAt).toLocaleString(); let cell5 = row.insertCell(4); let deleteBtn = document.createElement('button'); deleteBtn.innerHTML = '删除'; deleteBtn.addEventListener('click', () => { if (confirm('确定要删除这一行吗？')) { brands.splice(i, 1); renderTable(); } }); cell5.appendChild(deleteBtn); } } // 添加品牌 function addBrand() { let name = prompt('请输入品牌名称：'); let status = prompt('请输入品牌状态：'); brands.push({ name: name, status: status, createdAt: new Date() }); renderTable(); } renderTable(); </script> </body> </html> ``` 在上述代码中，我们使用了一个数组来存储品牌数据，通过 `renderTable` 函数渲染表格，`addBrand` 函数用于添加新的品牌。删除操作通过确认框来确认，然后更新数据并重新渲染表格。 ######[AI写代码神器 | 676点数解答 | 2024-11-18 17:41:17]

服务商

更多选项

快捷项

自定义