首页js点击按钮添加table列表

js点击按钮添加table列表

时间: 2024-09-18 12:02:55 浏览: 46

在JavaScript中，你可以通过创建HTML元素、事件监听以及DOM操作来实现点击按钮后动态添加表格列表。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态添加表格</title> </head> <body> <button id="addTableBtn">点击添加表格</button> <table id="myTable" border="1">  </table> <script> // 获取按钮和表格元素 const addButton = document.getElementById('addTableBtn'); const myTable = document.getElementById('myTable'); // 点击按钮事件处理函数 addButton.addEventListener('click', function() { // 创建新的行和单元格 let newRow = myTable.insertRow(-1); // 在最后一行插入新行 for (let i = 0; i < 3; i++) { // 假设每行有三个单元格 let newCell = newRow.insertCell(i); newCell.textContent = '新增列' + (i+1); // 设置单元格内容 } }); </script> </body> </html> ``` 在这个例子中，当你点击"点击添加表格"按钮时，会为现有的`myTable`表格添加一行，并填充三列。可以根据需要修改表头和单元格内容。

阅读全文