原生 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> <button onclick="addRow()">添加</button> <table id="brandTable"> <tr> <th>品牌名称</th> <th>创立时间</th> <th>操作</th> </tr> </table> <script> // 初始化表格数据 let brandData = [ { name: "Apple", founded: "1976" }, { name: "Microsoft", founded: "1975" }, { name: "Google", founded: "1998" } ]; // 渲染表格 function renderTable() { let table = document.getElementById("brandTable"); brandData.forEach((brand, index) => { let row = table.insertRow(index + 1); let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); cell1.innerHTML = brand.name; cell2.innerHTML = brand.founded; let deleteBtn = document.createElement("button"); deleteBtn.innerHTML = "删除"; deleteBtn.onclick = () => { if (confirm("确定要删除这一行吗？")) { brandData.splice(index, 1); renderTable(); } }; cell3.appendChild(deleteBtn); }); } renderTable(); // 添加行 function addRow() { let name = prompt("请输入品牌名称："); let founded = prompt("请输入创立时间："); brandData.push({ name, founded }); renderTable(); } </script> </body> </html> ``` 在上述代码中，我们首先定义了初始的品牌数据，然后通过 `renderTable` 函数将数据渲染到表格中。添加行通过 `addRow` 函数实现，删除行通过确认框和 `splice` 方法实现。 ######[AI写代码神器 | 577点数解答 | 2024-11-18 17:34:52]

服务商

更多选项

快捷项

自定义