首页html点击按钮添加一行表格

html点击按钮添加一行表格

时间: 2023-07-06 19:06:12 浏览: 221

你可以使用JavaScript来实现这个功能。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Add Table Row on Button Click</title> <script> function addRow() { // 获取表格对象 var table = document.getElementById("myTable"); // 创建新行和单元格 var row = table.insertRow(); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); // 设置单元格内容 cell1.innerHTML = "New cell 1"; cell2.innerHTML = "New cell 2"; } </script> </head> <body> <table id="myTable"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> </table> <br> <button onclick="addRow()">Add Row</button> </body> </html> ``` 在这个示例中，我们在HTML页面中定义了一个表格，并且在表格下方添加了一个按钮。当用户点击按钮时，`addRow()`函数会被调用。该函数获取表格对象，然后使用`insertRow()`和`insertCell()`方法创建新的行和单元格。最后，我们使用`innerHTML`属性设置单元格的内容。

阅读全文