javascript - 将数组的每个元素放在由 Javascript 创建的表格的单元格中

Question

我使用 javascript 创建了一个表。但是，我希望表中的每个单元格 (td) 都按数组中元素的顺序显示数组中的每个元素。这是其中包含单词的数组:

var Myarray=['Anime','Demon','Black','Death','Beast','Tokyo','Manga','Titan','Ghoul'];

到目前为止，这是我的 Javascript 代码:

function display_array(Myarray){
        var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = "1px solid black";
    var arrayLength = Myarray.length;
    var sqroot=Math.sqrt(arrayLength);

    for(var i = 0; i < sqroot; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < sqroot; j++){
            if(i == sqroot && j == sqroot){
                break;
            } else {
                var td = tr.insertCell();


                for(var q = 0; q < arrayLength; q++){
                    td.appendChild(document.createTextNode(Myarray[q]));
                }

                td.style.border = "1px solid black";
                if(i == 1 && j == 1){
                    td.setAttribute('rowSpan', '1');
                }
            }
        }
    }
    body.appendChild(tbl);

}

使用这段代码，我的表格如下所示:

____________________________________________________________________________________________________________________________________________
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------
 |AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|AnimeDemonBlackDeathBeastTokyoMangaTitanGhoul|
--------------------------------------------------------------------------------------------------------------------------------------------

我希望我的表格看起来像这样:

___________________
|Anime|Demon|Black|
-------------------
|Death|Beast|Tokyo|
-------------------
|Manga|Titan|Ghoul|
-------------------

Answer 1

我不明白你为什么要使用 sqroot，但如果你想要一个包含数组中每个项目的 3 列表，可以这样做:

var tr, td;
for (var i = 0; i < arrayLength; i++) {
    if (i % 3 === 0)
        tr = tbl.insertRow();
    td = tr.insertCell();
    td.appendChild(document.createTextNode(Myarray[i]));
}