js 循环动态生成table表格
时间: 2024-05-10 20:14:23 浏览: 13
可以使用 JavaScript 中的 DOM 操作来动态生成表格。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态生成表格</title>
</head>
<body>
<button onclick="createTable()">生成表格</button>
<div id="tableContainer"></div>
<script>
// 创建表格
function createTable() {
// 获取容器元素
let container = document.getElementById("tableContainer");
// 创建 table 元素
let table = document.createElement("table");
// 创建表头
let headerRow = document.createElement("tr");
let header1 = document.createElement("th");
let header2 = document.createElement("th");
header1.innerHTML = "姓名";
header2.innerHTML = "年龄";
headerRow.appendChild(header1);
headerRow.appendChild(header2);
table.appendChild(headerRow);
// 创建数据行
let dataRow1 = document.createElement("tr");
let data1_1 = document.createElement("td");
let data1_2 = document.createElement("td");
data1_1.innerHTML = "张三";
data1_2.innerHTML = "20";
dataRow1.appendChild(data1_1);
dataRow1.appendChild(data1_2);
table.appendChild(dataRow1);
let dataRow2 = document.createElement("tr");
let data2_1 = document.createElement("td");
let data2_2 = document.createElement("td");
data2_1.innerHTML = "李四";
data2_2.innerHTML = "22";
dataRow2.appendChild(data2_1);
dataRow2.appendChild(data2_2);
table.appendChild(dataRow2);
// 将表格添加到容器中
container.appendChild(table);
}
</script>
</body>
</html>
```
这个示例中,当用户点击“生成表格”按钮时,`createTable` 函数会被调用。该函数首先获取一个容器元素(`<div>`),然后创建一个 `<table>` 元素。接着,函数创建表头和数据行,并将它们添加到表格中。最后,将表格添加到容器中。