请用html和js写一个表格，然后js用按钮点击事件动态添加表格一列

在HTML中，我们可以创建一个基础的表格结构，并用JavaScript添加动态内容。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动态添加表格列</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } </style> </head> <body> <button onclick="addColumn()">点击添加列</button> <table id="dynamicTable"> <thead> <tr> <th>标题1</th> <th>标题2</th> </tr> </thead> <tbody>  <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody> </table> <script> function addColumn() { // 获取当前表格和最后一行的引用 var table = document.getElementById("dynamicTable"); var lastRow = table.rows[table.rows.length - 1]; // 创建新的单元格并添加到最后一行的最后面 var newCell = table.insertCell(lastRow.cells.length); // 可以为新添加的列设置一个默认值，比如输入框 newCell.innerHTML = '<input type="text">'; // 如果需要保存数据，可以给这个元素绑定事件监听器（如oninput） // newCell.addEventListener('input', function() { // console.log('新列的数据:', this.innerText); // }); } </script> </body> </html> ``` 在这个例子中，当点击"点击添加列"按钮时，会触发`addColumn`函数，该函数会在现有的最后一行表格单元格后插入一个新的单元格，包含一个文本输入框。你可以根据实际需求修改这一部分。

阅读全文