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]));
}

Answer 2

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

这将循环并为每个元素创建一个textNode。如果你想要一个元素使用Myarray[index];在这种情况下，索引是i * sqroot + j。

td.appendChild(document.createTextNode(Myarray[i * sqroot + j]))

Answer 3

在您的函数中创建一个名为 index 的变量

var index =0;

然后用

替换你的其他代码

            var td = tr.insertCell();
            td.appendChild(document.createTextNode(Myarray[index]));
            td.style.border = "1px solid black";
            if(i == 1 && j == 1){
                td.setAttribute('rowSpan', '1');
            }
            index++;

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

3 个答案: