使用JavaScript实现动态创建表格
使用JavaScript实现动态创建表格是一种非常方便的方式,可以帮助用户快速生成表格,提升工作效率。以下是实现方法:
<script>
// 创建表格元素
var table = document.createElement("table");
// 创建表头
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "姓名";
cell = row.insertCell(1);
cell.innerHTML = "年龄";
cell = row.insertCell(2);
cell.innerHTML = "性别";
// 创建数据行
var tbody = document.createElement("tbody");
for (var i = 1; i <= 5; i++) {
row = tbody.insertRow(i - 1);
cell = row.insertCell(0);
cell.innerHTML = "No." + i;
cell = row.insertCell(1);
cell.innerHTML = 20 + i;
cell = row.insertCell(2);
cell.innerHTML = i % 2 === 0 ? "女" : "男";
}
// 将表头和数据加到表格中
table.appendChild(header);
table.appendChild(tbody);
// 将表格显示出来
document.body.appendChild(table);
script>
下载地址
用户评论