2011-07-30 22 views
0

我只是在学习这些东西,所以请原谅我的代码或问题是非常基本的。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)); 

刚添加所有东西从在那里循环:(
例如,对于()循环的第一次迭代的具有abc和第二有def它ABCDEF显示,而不是ABC第一次和DEF的第二个。
B)为什么是这样,我该如何解决它?

谢谢!

+0

对于初学者,请学会正确缩进代码。像WebStorm(或者甚至是jsFiddle)这样的编辑器都有这样的按钮... –

+0

所有那些位于for-loop顶部的变量应该被声明......你正在污染全局命名空间。 –

+4

给他休息一下 - 他说他在学习。 –

回答

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  
} 

让我知道如果我误解你的问题,但如果你想知道为什么你的表是建立只有一行或反复修改相同的单元格,这绝对是为什么......如果您的问题还有更多的问题,请告诉我,我会更新这篇文章。

快乐编码。

B

+0

谢谢布赖恩,大约15分钟后会回来,因为你会写出你所做的修改并测试它,所以它会陷入:) – Ryan

+0

好的,所有的工作,谢谢! – Ryan