如何在表格底部添加新行 - JavaScript 示例

'在表格底部添加新行 - JavaScript 示例' '本文介绍如何使用JavaScript在表格底部添加新行，包括添加复选框、商品、单价、数量、小计和删除按钮。' '在table的HTML代码中添加一个按钮元素，如下所示：' 'html\' \'<button id=\'addButton\'>新增</button>\' \'' '然后，使用JavaScript代码来处理按钮的点击事件，以在表格的最下方添加一行。代码如下：' 'javascript\' \'// 获取表格元素\' \'var table = document.getElementById(\'myTable\');\' \'// 获取按钮元素\' \'var addButton = document.getElementById(\'addButton\');\' \'// 监听按钮的点击事件\' \'addButton.addEventListener(\'click\', function() {\' \' // 创建新的表格行\' \' var newRow = table.insertRow(-1); // -1 表示在表格最后一行插入\' \' // 添加单元格及内容\' \' var checkboxCell = newRow.insertCell(0);\' \' checkboxCell.innerHTML = '<input type=\'checkbox\'>';\' \' var productCell = newRow.insertCell(1);\' \' productCell.innerHTML = '商品';\' \' var priceCell = newRow.insertCell(2);\' \' priceCell.innerHTML = '单价';\' \' var quantityCell = newRow.insertCell(3);\' \' quantityCell.innerHTML = '数量';\' \' var subtotalCell = newRow.insertCell(4);\' \' subtotalCell.innerHTML = '小计';\' \' var deleteButtonCell = newRow.insertCell(5);\' \' deleteButtonCell.innerHTML = '<button class=\'deleteButton\'>删除</button>';\' \'});\' \'' '这样，每次点击新增按钮时，都会在表格的最下方添加一行，并且包含复选框、商品、单价、数量、小计和删除按钮。'