动态生成表格
时间: 2023-07-26 19:03:28 浏览: 56
您可以使用HTML和JavaScript来动态生成表格。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成表格</title>
</head>
<body>
<button onclick="generateTable()">生成表格</button>
<table id="myTable">
</table>
<script>
function generateTable() {
// 创建表格
var table = document.getElementById("myTable");
// 创建表头
var headerRow = table.insertRow(0);
var headerCell1 = headerRow.insertCell(0);
var headerCell2 = headerRow.insertCell(1);
headerCell1.innerHTML = "<b>姓名</b>";
headerCell2.innerHTML = "<b>年龄</b>";
// 创建数据行
var dataRow1 = table.insertRow(1);
var dataCell1_1 = dataRow1.insertCell(0);
var dataCell1_2 = dataRow1.insertCell(1);
dataCell1_1.innerHTML = "张三";
dataCell1_2.innerHTML = "25";
var dataRow2 = table.insertRow(2);
var dataCell2_1 = dataRow2.insertCell(0);
var dataCell2_2 = dataRow2.insertCell(1);
dataCell2_1.innerHTML = "李四";
dataCell2_2.innerHTML = "30";
}
</script>
</body>
</html>
```
在这个示例中,我们首先在HTML中创建了一个空表格,并且添加了一个按钮,用于触发生成表格的函数。当点击按钮时,`generateTable()`函数会被调用。
在`generateTable()`函数中,我们首先获取了表格元素,并且创建了一个表头行和两个表头单元格。然后,我们创建了两行数据,每一行都有两个数据单元格,分别填充了姓名和年龄数据。
当函数执行完毕后,表格就会被动态生成并且显示在页面上。您可以根据需要修改这段代码,来适应您的具体需求。