Создание 2-мерной таблицы с div без тега table с использованием javascript - PullRequest
Новая
       76

Создание 2-мерной таблицы с div без тега table с использованием javascript

0 голосов
/ 13 апреля 2020

Я хочу создать таблицу, используя тег 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 Ответ

1 голос
/ 14 апреля 2020

Измените все 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>
...