html点击按钮添加一行表格
时间: 2023-07-06 07:06:12 浏览: 190
点击按钮,动态添加表格
你可以使用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`属性设置单元格的内容。
阅读全文