js div中添加table
时间: 2024-03-08 21:49:03 浏览: 19
你可以使用JavaScript来动态创建一个table元素,然后将其添加到HTML的div元素中。以下是一个例子:
```html
<div id="myDiv"></div>
<script>
// 创建一个table元素
var table = document.createElement("table");
// 创建表头
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.textContent = "Name";
var th2 = document.createElement("th");
th2.textContent = "Age";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);
table.appendChild(thead);
// 创建表格数据
var tbody = document.createElement("tbody");
for (var i = 0; i < 3; i++) {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.textContent = "Person " + (i+1);
var td2 = document.createElement("td");
td2.textContent = Math.floor(Math.random() * 20) + 20;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr);
}
table.appendChild(tbody);
// 将table添加到div中
var div = document.getElementById("myDiv");
div.appendChild(table);
</script>
```
这个例子中,通过JavaScript动态创建了一个包含表头和表格数据的table元素,并将其添加到了ID为"myDiv"的div元素中。