原生 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"> <thead> <tr> <th>品牌名称</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <button onclick="addBrand()">添加</button> <script> // 初始化品牌数据 let brands = [ { name: '品牌 1' }, { name: '品牌 2' }, { name: '品牌 3' } ]; // 渲染表格 function renderTable() { let tbody = document.querySelector('#brandTable tbody'); tbody.innerHTML = ''; for (let brand of brands) { let row = document.createElement('tr'); let nameCell = document.createElement('td'); nameCell.textContent = brand.name; let actionCell = document.createElement('td'); let deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => { if (confirm('确定要删除该品牌吗？')) { let index = brands.indexOf(brand); brands.splice(index, 1); renderTable(); } }); actionCell.appendChild(deleteButton); row.appendChild(nameCell); row.appendChild(actionCell); tbody.appendChild(row); } } renderTable(); // 添加品牌 function addBrand() { let brandName = prompt('请输入品牌名称：'); if (brandName) { brands.push({ name: brandName }); renderTable(); } } </script> </body> </html> ``` 在上述代码中，我们使用了 JavaScript 的数组来存储品牌数据，通过`renderTable`函数将数据渲染到表格中。`addBrand`函数用于添加新的品牌，`deleteButton`的点击事件处理函数用于处理删除操作。 ######[AI写代码神器 | 573点数解答 | 2024-11-13 17:57:53]

服务商

更多选项

快捷项

自定义