0

我正在尝试为表格的每个单元格动态创建 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 循环，它遍历需要输出的整个数据数组。

编辑：如果有一种更简单的方法可以用数组中的数据填充单元格，我会很高兴知道。

4

2 回答 2

1

我不确定您的表格、设置或确切需求....但我相信您希望在创建单元格后为某些表格单元格提供内容。您对它们的命名是正确的想法，但是您不能将 s 包装<td>在<div>s 中，因此您的下一个最佳选择是简单地命名 < td>s。

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

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/

于 2013-05-26T00:49:31.213 回答
0

您可以单独创建元素，然后再组织它们，将一个插入另一个。就像是：

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中是什么...

于 2013-05-25T23:36:42.027 回答