使用appendChild或innerHtml的問題

Question

我想通過使用javascript而不是jQuery將我的tr和td附加到tbody中。目前我正在使用jquery .html（）我想用Javascript來改變它。

var arrStrData = []; 

for (i = 0; i < objData.length; i++) { 
    arrStrData.push("<tr>"); 
    arrStrData.push("<td>"); 
    arrStrData.push(objData[i].FirstName); 
    arrStrData.push("</td>"); 
    arrStrData.push("<td>"); 
    arrStrData.push(objData[i].LastName); 
    arrStrData.push("</td>"); 
    arrStrData.push("<td>"); 
    arrStrData.push(objData[i].Gender); 
    arrStrData.push("</td>"); 
    arrStrData.push("<td>"); 
    arrStrData.push(objData[i].Country); 
    arrStrData.push("</td>"); 
    arrStrData.push("<td>"); 
    arrStrData.push(objData[i].Password); 
    arrStrData.push("</td>"); 
    arrStrData.push("</tr>"); 
} 
$("tbody").html(arrStrData.join('')); 

Answer 1

作爲最小變更現有的代碼，你可以跟着它：

var div = document.createElement('div'); 
div.innerHTML = '<table><tbody>' + arrStrData.join('') + '</tbody></table>'; 
var tbody = document.getElementsByTagName('tbody')[0]; 
tbody.parentNode.replaceChild(
    div.getElementsByTagName('tbody')[0], tbody 
); 

一個更普遍的版本可能是：

var tbody = document.getElementsByTagName('tbody')[0]; 
var frag = document.createDocumentFragment(); 
var oRow = document.createElement('tr'); 
var oCell = document.createElement('td'); 
var propArray = ['FirstName','LastName','Gender', 
       'Country','Password']; 
var row, cell, obj; 

for (var i=0, iLen=objData.length; i<iLen; i++) { 
    row = oRow.cloneNode(false); 
    o = objData[i] 

    for (var j=0, jLen=propArray.length; j<jLen; j++) { 
    cell = oCell.cloneNode(false); 
    cell.appendChild(document.createTextNode(o[propArray[j]])); 
    row.appendChild(cell); 
    } 
    frag.appendChild(row); 
} 

tbody.appendChild(frag); 

以上是您可以適應您的情況的一般方法。

Answer 2

只有當只有一個tbody元素（就像您的jQuery示例）一樣工作。

document.getElementsByTagName("tbody")[0].innerHTML=arrStrData.join(''); 

jsFiddle Demo

你會在定義id您table或tbody和使用document.getElementById()的更好。

Answer 3

請參閱以下使用原生javascript在表格中實施addRow的URL。

http://www.mredkj.com/tutorials/tableaddrow.html

Answer 4

正如您已經使用jQuery爲什麼不使用它來幫助你，這就是它的存在是有畢竟。

var useKeys = ['FirstName', 'LastName', 'Gender', 'Country', 'Password'], 
    html = ''; 

for (var i = 0; i < objData.length; i++) { 
    var row = $(useKeys).map(function(value, key) { 
     var value = objData[i][key]; 
     return '<td>' + (value == undefined ? '' : value) + '</td>'; 
    }).get(); 

    html += '<tr>' + row + '</tr>'; 
} 

$('tbody').html(html); 

Working fiddle