使用javascript创建一个没有table标签的带有div的二维表答案

【问题标题】：Creating a 2-dimensional table with div without the table tag using javascript使用javascript创建一个没有table标签的带有div的二维表
【发布时间】：2020-04-14 21:21:33
【问题描述】：

我想使用 div 标记而不使用 javascript 的 table 标记制作一个表格。我自己使用 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>

【问题讨论】：

您想要类似的代码但使用div 元素而不是table/tr/td 元素吗？
@Benny 是的，那太好了。与我正在寻找的非常相似。

标签： javascript html css html-table

【解决方案1】：

将所有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>

【讨论】：

您好，非常感谢您的回答。它解决了我问题的第一部分。感谢您的帮助，当我在自己的工作中单击单元格时，我想获得该单元格的数值。我应该为此使用跨度类吗？如果您能提供帮助，我将非常高兴。
嘿@sadikkaplan，我添加了点击事件。请运行代码片段
老兄，你真的帮了很多忙。我非常感谢你。你是一个优秀的开发者。