HTML 表格新增行：在表格末尾添加新行并自定义内容
可以使用HTML和JavaScript来实现在table上面添加一个"新增"按钮，并在点击新增按钮时，在表格最下方添加一行内容。\n\n以下是一个简单的示例代码：\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n <title>新增按钮示例</title>\n <style>\n table {\n width: 100%;\n border-collapse: collapse;\n }\n th, td {\n border: 1px solid black;\n padding: 5px;\n }\n button {\n margin-bottom: 10px;\n }\n </style>\n</head>\n<body>\n <table id="myTable">\n <tr>\n <th>复选框</th>\n <th>商品</th>\n <th>1</th>\n <th>1</th>\n <th>1</th>\n <th>删除按钮</th>\n </tr>\n </table>\n\n <button id="addButton">新增</button>\n\n <script>\n // 获取表格和新增按钮元素\n var table = document.getElementById("myTable");\n var addButton = document.getElementById("addButton");\n\n // 给新增按钮添加点击事件处理函数\n addButton.addEventListener("click", function() {\n // 在表格最后一行添加新行\n var newRow = table.insertRow(-1);\n\n // 在新行中添加单元格并设置内容\n var checkBoxCell = newRow.insertCell(0);\n checkBoxCell.textContent = "复选框";\n\n var productCell = newRow.insertCell(1);\n productCell.textContent = "商品";\n\n var cell1 = newRow.insertCell(2);\n cell1.textContent = "1";\n\n var cell2 = newRow.insertCell(3);\n cell2.textContent = "1";\n\n var cell3 = newRow.insertCell(4);\n cell3.textContent = "1";\n\n var deleteButtonCell = newRow.insertCell(5);\n deleteButtonCell.textContent = "删除按钮";\n });\n </script>\n</body>\n</html>\n\n\n在上述代码中，我们首先创建了一个包含表格和新增按钮的HTML页面。然后，使用JavaScript获取表格和新增按钮的元素，并给新增按钮添加了一个点击事件处理函数。在点击新增按钮时，会在表格的最后一行添加一行新的内容，包括复选框、商品、1、1、1和删除按钮。
原文地址: https://www.cveoy.top/t/topic/qabp 著作权归作者所有。请勿转载和采集!