Javascript:DOM,appendChild - 几个问题

时间:2011-07-30 15:33:06

标签: javascript dom appendchild

我只是在学习这些东西,所以请原谅我的代码或问题是否非常基础。

我的“工作代码”(没有错误等)只是让你知道到目前为止我所拥有的:

var t = document.createElement("table"),
    tr = document.createElement("tr"),
    tr2 = document.createElement("tr"),
    td = document.createElement("td"),
    td2 = document.createElement("td"),
    a = document.createElement("a"),
    strong = document.createElement("strong");

t.style.width = "80%";
t.style.border = "0";
t.cellspacing = "2";
t.cellpadding = "2";

for (var i = 0; i < nodes.length; i++) {
    the_table_color = nodes[i].getAttribute("table_color");
    the_type = nodes[i].getAttribute("type");
    alt_link = nodes[i].getAttribute("alt_link");
    link_for_deletion = nodes[i].getAttribute("link_for_deletion");
    comment = nodes[i].getAttribute("comment");

    tr.bgColor = the_table_color;
    t.appendChild(tr);

    td.width = "16%";
    td.vAlign = "top";
    tr.appendChild(td);

    strong.appendChild(document.createTextNode(the_type));
    td.appendChild(strong);

    td.width = "16%";
    td.vAlign = "top";
    tr.appendChild(td);

    td2.width = "70%";
    td2.vAlign = "top";
    tr.appendChild(td2);

    a.href = alt_link;
    a.appendChild(document.createTextNode(alt_link));
    a.target = "_blank";
    td2.appendChild(a);
}

从上面我可以看到,我有这个:

td = document.createElement("td"),
    td2 = document.createElement("td"),

原因是,如果我没有再次声明“td”,第一个被覆盖而第二个不显示...
A)这是正确的做法吗? (不确定这是否是正确的方法,我提出了声明另一个变量以使其工作的解决方案,但它似乎是额外的代码)

然后这行代码:

strong.appendChild(document.createTextNode(the_type));

只是添加循环中的所有东西:(
例如,for()循环的第一次迭代有abc,第二次迭代有def,它第一次显示abcdef而不是abc,第二次显示def。 B)为什么这样,我该如何解决?

谢谢!

1 个答案:

答案 0 :(得分:2)

每次迭代都会针对同一个实例执行for循环。除非您执行以下操作,否则不会获得多行数据:

document.createElement("TR");
document.createElement("TD");

在循环体内。否则,你是完全正确的,你只是在循环中每次迭代时将相同的文本附加到同一行和表格单元格。

听起来你需要改变你的方法:

var table = document.createElement("TABLE");
for(var i = 0; i < nodes.length; i++){
    var tr = document.createElement("TR");
    var td = document.createElement("TD");
    tr.appendChild(td);
    table.appendChild(tr);

    // do something to to td    
}

如果我误解了您的问题,请告诉我,但如果您想知道为什么您的桌子只构建一行或反复修改同一个单元格,那肯定是...如果您的问题还有更多,请告诉我我会更新帖子。

快乐的编码。