原生 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> <h1>品牌列表</h1> <table id="brandTable"> <tr> <th>品牌名称</th> <th>创立时间</th> <th>操作</th> </tr> </table> <button onclick="addBrand()">添加</button> <script src="https://unpkg.com/dayjs@1.11.7/dayjs.min.js"></script> <script> function addBrand() { const table = document.getElementById('brandTable'); const newRow = table.insertRow(-1); const brandNameCell = newRow.insertCell(0); const createTimeCell = newRow.insertCell(1); const operationCell = newRow.insertCell(2); const brandNameInput = document.createElement('input'); brandNameCell.appendChild(brandNameInput); const createTimeInput = document.createElement('input'); createTimeCell.appendChild(createTimeInput); const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', function () { if (confirm('确定要删除这一行吗？')) { table.deleteRow(newRow.rowIndex); } }); operationCell.appendChild(deleteButton); } </script> </body> </html> ``` 在上述代码中，点击"添加"按钮会在表格中新增一行，包含品牌名称、创立时间的输入框和删除按钮。点击删除按钮会弹出确认框，确认后删除对应行。 ######[AI写代码神器 | 469点数解答 | 2024-11-17 21:59:01]

服务商

更多选项

快捷项

自定义