使用javascript创建一个没有table标签的带有div的二维表格
我想使用 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>
慕哥9229398浏览 107回答 1
1回答
-
HUH函数
将所有 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>
随时随地看视频慕课网APP
相关分类
Html5