html动态表格
时间: 2023-07-01 22:22:58 浏览: 50
HTML动态表格可以通过JavaScript动态地向表格中添加、删除或修改数据,并实时更新页面显示。以下是一个简单的HTML动态表格的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态表格</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";
}
function deleteRow() {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
if (rowCount > 1) {
table.deleteRow(rowCount - 1);
}
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<th>列1</th>
<th>列2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<br>
<button onclick="addRow()">添加行</button>
<button onclick="deleteRow()">删除行</button>
</body>
</html>
```
在这个例子中,我们通过JavaScript定义了两个函数:addRow()和deleteRow(),分别用于添加新行和删除最后一行。当用户点击对应的按钮时,这些函数会被执行,动态地修改表格内容,并实时更新页面显示。