2013-03-09 79 views
2

我有一張隨時生成的表格,因爲它正在生成它的TD,我想將第一個TD設置爲一個按鈕。下面是我的代碼,顯然不起作用。我記得我遇到的另一個問題是,我們可以使用.html()更改div的內容,但這也不適用於此。如何使用js將按鈕添加到td?

代碼:

var table = document.getElementById("userinfo"); 
    var thead, tr, td; 
    table.appendChild(thead = document.createElement("thead")); 
    thead.appendChild(tr = document.createElement("tr")); 
    tr.appendChild(td = document.createElement("td")); 
    td.innerHTML = "Email"; 
    tr.appendChild(td = document.createElement("td")); 
    td.innerHTML = "First Name"; 
    tr.appendChild(td = document.createElement("td")); 
    td.innerHTML = "Last Name"; 
    tr.appendChild(td = document.createElement("td")); 
    td.innerHTML = "Is Active?"; 

    for (var i in data) 
    { 
     tr = document.createElement("tr"); 
     tr.setAttribute("id", "row" + i); 
     if (i%2 == 0) 
     { 
      tr.setAttribute("style", "background:white"); 
     } 

     var entry = data[i]; 
     console.log(entry); 
     table.appendChild(tr); 
     tr.appendChild(td = document.createElement("td")); 
     td.setAttribute("html", "<input type=\"button\" class=\"btn\" value=\'" + entry.email + "\" onclick=\"" + chooseUser(entry) + "\"/>"); 
     tr.appendChild(td = document.createElement("td")); 
     td.innerHTML = entry.first_name; 
     tr.appendChild(td = document.createElement("td")); 
     td.innerHTML = entry.last_name; 
     tr.appendChild(td = document.createElement("td")); 
     td.innerHTML = entry.isActive; 
    } 
+0

你試圖使用的appendChild而不是innerHTML的對TD的節點? – JalalJaberi 2013-03-09 20:10:33

+1

小記:'appendChild'返回附加節點。爲了更容易閱讀,你應該做一些類似於'td = tr.appendChild(document.createElement('td'))' - 表達式中間的賦值是東方的來混淆。 – 2013-03-09 20:11:37

回答

4

您可以使用td.innerHTML = '<input type="button"...';或者你可以做的 「正確」 的方式:

var btn = document.createElement('input'); 
btn.type = "button"; 
btn.className = "btn"; 
btn.value = entry.email; 
btn.onclick = (function(entry) {return function() {chooseUser(entry);}})(entry); 
td.appendChild(btn); 
+0

該死的,我一直認爲innerHTML不會渲染這個元素。生病嘗試這些。\ – iCodeLikeImDrunk 2013-03-09 20:10:23

+1

喜歡第二種方法順便說一句。 – iCodeLikeImDrunk 2013-03-09 20:10:58

+0

@Kolink:我之前讀過關於td標籤的innerHTML。如果我沒有錯,在某些情況下它不起作用。我認爲這是關於IE。這是真的嗎? – JalalJaberi 2013-03-09 20:12:16