我想使用 div 标签制作一个表格，而无需使用 javascript 的表格标签。我自己用div做了，但是无法用js生成表格。我想要表格单元格内的序列号。我可以遵循什么样的路径？我使用的一段代码如下var count=1;var table=document.createElement("table");for(var i=0;i<10;i++){var tr=document.createElement("tr");table.appendChild(tr);for(var j=0;j<8;j++){ var td=document.createElement("td"); td.innerHTML=count++; tr.appendChild(td); } }document.getElementById("display").innerHTML="";document.getElementById("display").appendChild(table);label{ display: block; } table,td{ border:1px solid grey; }<!doctype html><html> <body> <div id="display"></div> </body></html>
1 回答
HUH函数
TA贡献1836条经验 获得超4个赞
将所有 table, tr and td 标记更改为 div，然后您可以将 display 属性与 table, table-row and table-cell
请参阅下面的片段：
var count=1;
var table=document.createElement("div");
table.className = "table";
for(var i=0;i<10;i++){
var tr=document.createElement("div");
tr.className = "row";
table.appendChild(tr);
for(var j=0;j<8;j++){
var td=document.createElement("div");
td.className = "cell";
td.innerHTML=count++;
td.addEventListener("click", function(_event){
console.log(_event.target.innerHTML);
});
tr.appendChild(td);
}
}
document.getElementById("display").innerHTML="";
document.getElementById("display").appendChild(table);
label{
display: inline-block;
}
div, span{
border:1px solid grey;
}
div#display{
width: 186px;
}
div.table{
display:table;
padding:2px;
width: 180px;
}
div.row{
display:table-row;
}
div.cell{
display:table-cell;
}
<!doctype html>
<html>
<body>
<div id="display"></div>
</body>
</html>
- 1 回答
- 0 关注
- 48 浏览
添加回答
举报
0/150
提交
取消