Question

我正在尝试为我的表的每个单元格动态创建divtags，以便稍后我可以用其他东西填充它们。但是，当我尝试这样做时：

newhtml+="<div id ='" + (j) +"'><td class = 'unselected'>&nbsp?&nbsp</td></div>"

以后使用它就好像它从未创建它一样。

所以在浏览stackoverflow之后我发现你应该使用这行代码动态创建一个div标签：

var divtag = document.createElement('div');

但我的问题是如何将其实现到我的js代码中？

以下是应该为以后引用创建divtags的代码部分：

newhtml+="<tr>";
for (var j = 0; j < $tblcols; j++){
newhtml+="<div id ='" + (j) +"'><td class = 'unselected'>&nbsp?&nbsp</td></div>";

以下是使用它的部分：

divtag = document.getElementById("'" + (++$counter2) + "'");
newhtml +="<td class = 'solved'><img src ='sc2units/" + $counter2 + ".jpg'></td>";
divtag.innerHTML = newhtml;

每个部分都是一个嵌套的for循环，它遍历需要输出的整个数据数组。

编辑：如果有一种更简单的方法来填充数组中的数据，我很乐意知道。

Answer 1

我不确定你的桌子，设置或确切的需求....但我相信你想在你已经创建了单元格之后给某些表格单元格提供内容。您可以通过命名来获得正确的想法，但是您无法将<td>包裹在<div>中，因此您的下一个最佳选择就是简单地将＆lt; td>命名为自己

你也可以在第二个循环中添加内容，但我们将使用它。

<强> HTML

<table id="myTable">
    <tr>
        <td>[ content ]</td>
    </tr>
    <tr>
        <td>[ content ]</td>
        <td>[ content ]</td>
    </tr>
    [ etc ]
</table>

<强>的JavaScript

var tbl = document.getElementById("myTable"),
    rows = tbl.getElementsByTagName("tr");

// loop all rows
for (var r = 0; r < rows.length; r++){

    // loop all cols within the row
    var cols = rows[r].getElementsByTagName("td");
    for (var c = 0; c < cols.length; c++){
        cols[c].id = "row-" + r + "_col-" + c;
    }
}

// usage
document.getElementById("row-1_col-1").innerHTML = "JS POWER";

http://jsfiddle.net/daCrosby/tJYNM/

Answer 2

您可以单独创建元素，然后稍后组织它们，将一个元素插入另一个元素中。类似的东西：

var mydiv = document.createElement("DIV");
var mytd = document.createElement("TD");
mytd.innerHTML = "some basic text";
mydiv.appendChild(mytd);  // insert the TD inside the DIV
document.body.appendChild(mydiv);  // insert the DIV in the document's body

我只是不知道将TD放入DIV的内容是什么......

有关动态创建div标签的问题

2 个答案: