以下是一个使用原生 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 border="1"> <thead> <tr> <th>品牌名称</th> <th>创立时间</th> <th>操作</th> </tr> </thead> <tbody id="brandList"> </tbody> </table> <button onclick="addBrand()">添加</button> <script> // 模拟品牌数据 let brands = [ { name: "品牌 1", founded: "2020-01-01" }, { name: "品牌 2", founded: "2021-05-10" } ]; // 渲染表格 function renderTable() { let tbody = document.getElementById('brandList'); tbody.innerHTML = ''; for (let brand of brands) { let row = document.createElement('tr'); let nameCell = document.createElement('td'); nameCell.textContent = brand.name; let foundedCell = document.createElement('td'); // 这里可以使用 dayjs 或原生 JavaScript 处理时间格式 // 假设使用原生 JavaScript 简单处理 let foundedDate = new Date(brand.founded); foundedCell.textContent = foundedDate.toLocaleDateString(); let operationCell = document.createElement('td'); let deleteBtn = document.createElement('button'); deleteBtn.textContent = '删除'; deleteBtn.onclick = function () { if (confirm('确定要删除这一行吗？')) { let index = brands.indexOf(brand); brands.splice(index, 1); renderTable(); } }; operationCell.appendChild(deleteBtn); row.appendChild(nameCell); row.appendChild(foundedCell); row.appendChild(operationCell); tbody.appendChild(row); } } renderTable(); // 添加品牌 function addBrand() { let name = prompt('请输入品牌名称：'); let founded = prompt('请输入创立时间（yyyy-MM-dd）：'); brands.push({ name: name, founded: founded }); renderTable(); } </script> </body> </html> ``` 在上述代码中，我们首先定义了一个品牌数据数组，然后通过 `renderTable` 函数将数据渲染到表格中。点击删除按钮时会弹出确认框，确认后删除对应行的数据并重新渲染表格。点击添加按钮会提示输入品牌名称和创立时间，然后将新数据添加到数组并重新渲染表格。 [2024-11-18 15:41:27 | AI写代码神器 | 704点数解答]