原生 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"> <tr> <th>品牌名称</th> <th>创建时间</th> <th>操作</th> </tr> </table> <button onclick="addBrand()">添加</button> <script> // 品牌数据数组 let brands = [ { name: "品牌 1", createTime: new Date() }, { name: "品牌 2", createTime: new Date() } ]; // 渲染表格 function renderTable() { let table = document.getElementById('brandTable'); table.innerHTML = '<tr><th>品牌名称</th><th>创建时间</th><th>操作</th></tr>'; for (let brand of brands) { let row = table.insertRow(); let nameCell = row.insertCell(0); let timeCell = row.insertCell(1); let actionCell = row.insertCell(2); nameCell.innerHTML = brand.name; timeCell.innerHTML = brand.createTime.toLocaleString(); let deleteBtn = document.createElement('button'); deleteBtn.innerHTML = '删除'; deleteBtn.onclick = function () { if (confirm('确定要删除这一行吗？')) { let index = brands.indexOf(brand); brands.splice(index, 1); renderTable(); } }; actionCell.appendChild(deleteBtn); } } renderTable(); // 添加品牌 function addBrand() { let name = prompt('请输入品牌名称：'); if (name) { brands.push({ name: name, createTime: new Date() }); renderTable(); } } </script> </body> </html> ``` 在上述示例中，我们使用了一个数组来存储品牌数据，通过 `renderTable` 函数来渲染表格，`addBrand` 函数用于添加新的品牌。当点击删除按钮时，会弹出确认框，确认后删除对应行并重新渲染表格。 ######[AI写代码神器 | 596点数解答 | 2024-11-13 17:42:19]

服务商

更多选项

快捷项

自定义