,可以通过以下步骤实现:
<div id="tableContainer"></div>
var table = document.createElement("table");
document.getElementById("tableContainer").appendChild(table);
var row1 = table.insertRow(0);
var cell1 = row1.insertCell(0);
cell1.innerHTML = "表头1";
var row2 = table.insertRow(1);
var cell2 = row2.insertCell(0);
cell2.innerHTML = "数据1";
var row3 = table.insertRow(2);
var cell3 = row3.insertCell(0);
cell3.innerHTML = "数据2";
table.classList.add("table-style");
.table-style {
border-collapse: collapse;
width: 100%;
}
.table-style td, .table-style th {
border: 1px solid #ddd;
padding: 8px;
}
.table-style tr:nth-child(even) {
background-color: #f2f2f2;
}
.table-style th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
这样就可以使用JavaScript在div中创建一个简单的表格了。根据具体需求,可以进一步扩展和优化表格的功能和样式。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云