品牌列表制作 1、使用原生js配合ecma的高级语法实现，不可以直接使用vue实现。（练习js和ecma） 2、点击添加功能通过输入品牌名称可以在表格下面新增加一行 3、点击删除会出现确认框，如果点击确认就移除对应的这一行。 4、表格中时间的处理可以使用原生js，也可以根据提供的素材lib文件夹中的dayjs来实现。 5、列表包含行号、品牌名称、状态（已启用/已禁用通过滑动组件更改当前行状态）、创建时间（当前添加数据的时间）以及操作 6、已有两行原始数据 7、状态为已启用时才可以删除 8、行号随着删除操作动态变化

以下是一个使用原生 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> <input type="text" id="brandNameInput" placeholder="输入品牌名称"> <button onclick="addBrand()">添加</button> <table border="1" id="brandTable"> <thead> <tr> <th>行号</th> <th>品牌名称</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>品牌 1</td> <td>已启用</td> <td>2023-09-10 10:00:00</td> <td><button onclick="deleteBrand(this)">删除</button></td> </tr> <tr> <td>2</td> <td>品牌 2</td> <td>已禁用</td> <td>2023-09-11 11:00:00</td> <td><button disabled>删除</button></td> </tr> </tbody> </table> <script> // 定义一个全局变量来存储行号 let rowNumber = 2; function addBrand() { const brandName = document.getElementById('brandNameInput').value; if (brandName) { const table = document.getElementById('brandTable').getElementsByTagName('tbody')[0]; const newRow = table.insertRow(); const cell1 = newRow.insertCell(0); const cell2 = newRow.insertCell(1); const cell3 = newRow.insertCell(2); const cell4 = newRow.insertCell(3); const cell5 = newRow.insertCell(4); cell1.innerHTML = ++rowNumber; cell2.innerHTML = brandName; cell3.innerHTML = '已启用'; cell4.innerHTML = new Date().toISOString(); cell5.innerHTML = `<button onclick="deleteBrand(this)">删除</button>`; } } function deleteBrand(button) { const row = button.parentNode.parentNode; if (row.cells[2].innerHTML === '已启用') { if (confirm('确定要删除这一行吗？')) { row.parentNode.removeChild(row); updateRowNumbers(); } } else { alert('只有已启用的品牌才能删除！'); } } function updateRowNumbers() { const rows = document.getElementById('brandTable').getElementsByTagName('tbody')[0].rows; for (let i = 0; i < rows.length; i++) { rows[i].cells[0].innerHTML = i + 1; } rowNumber = rows.length; } </script> </body> </html> ``` 在上述代码中，实现了添加品牌、删除品牌（已启用状态）以及动态更新行号的功能。时间使用了原生的`new Date()`来获取当前时间。 [2024-11-18 21:15:31 | AI写代码神器 | 849点数解答]

服务商

更多选项

快捷项