以下是一个使用原生 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> // 模拟品牌数据 let brands = [ { name: "Brand 1", status: "Active", createTime: new Date() }, { name: "Brand 2", status: "Inactive", createTime: new Date() } ]; // 渲染表格 function renderTable() { let tbody = document.querySelector("#brandTable tbody"); tbody.innerHTML = ""; brands.forEach((brand, index) => { let row = document.createElement("tr"); row.innerHTML = ` <td>${index + 1}</td> <td>${brand.name}</td> <td>${brand.status}</td> <td>${brand.createTime.toLocaleString()}</td> <td><button class="deleteBtn" data-index="${index}">删除</button></td> `; tbody.appendChild(row); }); } // 添加品牌 document.getElementById("addBtn").addEventListener("click", () => { brands.push({ name: prompt("请输入品牌名称"), status: prompt("请输入品牌状态"), createTime: new Date() }); renderTable(); }); // 删除品牌 document.addEventListener("click", (event) => { if (event.target.classList.contains("deleteBtn")) { let index = event.target.dataset.index; if (confirm("确定要删除这一行吗？")) { brands.splice(index, 1); renderTable(); } } }); renderTable(); </script> </body> </html> ``` 在上述代码中，我们使用 JavaScript 来处理品牌数据的添加和删除，并通过重新渲染表格来显示更改。对于时间的显示，使用了 `Date` 对象的 `toLocaleString` 方法将其转换为本地字符串格式。 [2024-11-18 18:23:25 | AI写代码神器 | 649点数解答]