Javascript：DOM，appendChild - 幾個問題

我只是在學習這些東西，所以請原諒我的代碼或問題是非常基本的。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）爲什麼是這樣，我該如何解決它？

謝謝！

來源

2011-07-30 Ryan

對於初學者，請學會正確縮進代碼。像WebStorm（或者甚至是jsFiddle）這樣的編輯器都有這樣的按鈕... –

所有那些位於for-loop頂部的變量應該被聲明......你正在污染全局命名空間。 –

給他休息一下 - 他說他在學習。 –

您的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  
}

讓我知道如果我誤解你的問題，但如果你想知道爲什麼你的表是建立只有一行或反覆修改相同的單元格，這絕對是爲什麼......如果您的問題還有更多的問題，請告訴我，我會更新這篇文章。

快樂編碼。

來源

2011-07-30 15:46:59 Brian

謝謝布賴恩，大約15分鐘後會回來，因爲你會寫出你所做的修改並測試它，所以它會陷入:) – Ryan

好的，所有的工作，謝謝！ – Ryan

Javascript：DOM，appendChild - 幾個問題

回答

相關問題