我想使用 div 標(biāo)簽制作一個(gè)表格，而無需使用 javascript 的表格標(biāo)簽。我自己用div做了，但是無法用js生成表格。我想要表格單元格內(nèi)的序列號。我可以遵循什么樣的路徑？我使用的一段代碼如下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函數(shù)
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超4個(gè)贊
將所有 table, tr and td 標(biāo)記更改為 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 關(guān)注
- 154 瀏覽
添加回答
舉報(bào)
0/150
提交
取消