原生 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> <input type="text" id="brandNameInput" placeholder="输入品牌名称"> <button onclick="addBrand()">添加</button> <table border="1" id="brandTable"> <tr> <th>行号</th> <th>品牌名称</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> <tr> <td>1</td> <td>品牌 1</td> <td><button onclick="toggleStatus(0)">已启用</button></td> <td>2023-09-15 10:00:00</td> <td><button onclick="deleteBrand(0)">删除</button></td> </tr> <tr> <td>2</td> <td>品牌 2</td> <td><button onclick="toggleStatus(1)">已启用</button></td> <td>2023-09-16 11:00:00</td> <td><button onclick="deleteBrand(1)">删除</button></td> </tr> </table> <script> // 定义品牌数据数组 let brands = [ { name: '品牌 1', status: '已启用', createdAt: '2023-09-15 10:00:00' }, { name: '品牌 2', status: '已启用', createdAt: '2023-09-16 11:00:00' } ]; // 生成表格行 function generateTableRow(index, brand) { let row = document.createElement('tr'); row.innerHTML = ` <td>${index + 1}</td> <td>${brand.name}</td> <td><button onclick="toggleStatus(${index})">${brand.status}</button></td> <td>${brand.createdAt}</td> <td><button onclick="deleteBrand(${index})">删除</button></td> `; return row; } // 添加品牌 function addBrand() { let brandName = document.getElementById('brandNameInput').value; if (brandName) { let newBrand = { name: brandName, status: '已启用', createdAt: new Date().toISOString() }; brands.push(newBrand); let table = document.getElementById('brandTable'); table.appendChild(generateTableRow(brands.length - 1, newBrand)); document.getElementById('brandNameInput').value = ''; } } // 切换状态 function toggleStatus(index) { brands[index].status = brands[index].status === '已启用'? '已禁用' : '已启用'; let button = document.getElementById('brandTable').rows[index + 1].cells[2].getElementsByTagName('button')[0]; button.innerHTML = brands[index].status; } // 删除品牌 function deleteBrand(index) { if (brands[index].status === '已启用') { if (confirm('确定要删除吗？')) { brands.splice(index, 1); let table = document.getElementById('brandTable'); table.deleteRow(index + 1); } } else { alert('只有已启用状态的品牌才能删除！'); } } </script> </body> </html> ``` 在上述代码中，我们使用原生 JavaScript 实现了添加、切换状态和删除品牌的功能。状态切换通过修改数据数组中的状态值，并更新界面上的按钮文本。删除操作在确认后从数据数组和表格中移除相应的行。 ######[AI写代码神器 | 1015点数解答 | 2024-11-18 17:45:51]

服务商

更多选项

快捷项

自定义