动态新增表格一行HTML页面源代码_html动态表格的完整代码
时间: 2023-08-17 18:04:07 浏览: 103
以下是一个简单的HTML动态表格的完整代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态新增表格一行</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button onclick="addRow()">新增一行</button></td>
</tr>
</tfoot>
</table>
<script>
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type='text' name='name'>";
cell2.innerHTML = "<input type='text' name='age'>";
cell3.innerHTML = "<input type='text' name='gender'>";
}
</script>
</body>
</html>
```
上述代码中,通过`<table>`标签创建一个表格,其中包括表头、表身和表尾三个部分。在表身中,定义了两行表格数据。在表尾中,通过一个按钮触发`addRow()`函数动态新增一行表格数据。
`addRow()`函数通过`getElementById()`方法获取到表格的DOM对象,然后使用`insertRow()`方法在表格的末尾插入一行。接着使用`insertCell()`方法在新行中插入三个单元格,然后使用`innerHTML`属性为每个单元格中插入一个输入框。最后,点击按钮即可动态新增一行表格数据。
阅读全文