無法在表格中添加新行

Question

function load(){ 
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>"; 
    var tablebody = document.getElementById("classestable"); 
    tablebody.innerHTML += "<tbody></tbody>"; 
    tablebody.getElementsByTagName("tbody").innerHTML = ""; 
    for(var i=0;i<15;i++){ 
     tablebody.getElementsByTagName("tbody").innerHTML += row; 
    } 
} 

上述代碼運行良好，但row的內容未添加到tbody。

console.log顯示row的內容是有效的html，並且控制檯中沒有錯誤。爲什麼沒有被添加？

Answer 1

的getElementsByTagName返回一個節點列表，你使用節點的索引

我就這樣，你只掃描DOM的代碼更改爲以下

var innerRow = ""; 

for(var i=0;i<15;i++){ 
    innerRow += row; 
} 

tablebody.getElementsByTagName("tbody")[0].innerHTML = innerRow 

訪問它的第一個節點一次不是15次

Answer 2

無法在Internet Explorer的表格上使用innerHTML，getElementsByTagName返回NodeList而不是單個節點，並且表格還具有tBodies屬性。

你修改後的代碼應該是：

function load(){ 
    var tr = document.createElement('tr'), td; 
    td = tr.appendChild(document.createElement('td')); 
    td.innerHTML = "<select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select>"; 
    td = tr.appendChild(document.createElement('td')); 
    td.innerHTML = "<input id=\"choosemods\" type=\"text\" />"; 
    td = tr.appendChild(document.createElement('td')); 
    td.innerHTML = "<input id=\"choosegrade\" type=\"text\" />"; 
    var tablebody = document.getElementById("classestable").tBodies[0]; 
    for(var i=0;i<15;i++){ 
     tablebody.appendChild(tr.cloneNode(true)); 
    } 
} 

Answer 3

沒有一點增加每次DOM的循環運行。將它添加到html變量並執行一個dom事務。

function load(){ 
    var html= ''; 
    var row="<tr><td><select id=\"chooseclass\"><option value=\"math\">Math</option><option value=\"phys\">Physics</option><option value=\"lit\">Literature</option><option value=\"chem\">Chemistry</option><option value=\"bio\">Biology</option><option value=\"lang\">Language</option><option value=\"proj\">Project</option><option value=\"elec\">Elective</option></select></td><td><input id=\"choosemods\" type=\"text\" /></td><td><input id=\"choosegrade\" type=\"text\" /></td></tr>"; 
    var tablebody = document.getElementById("classestable"); 
    tablebody.innerHTML += "<tbody></tbody>"; 
    tablebody.getElementsByTagName("tbody").innerHTML = ""; 
    for(var i=0;i<15;i++){ 
     html += row; 
    } 
    tablebody.getElementsByTagName("tbody")[0].innerHTML = html;// Select first element from array of nodes 
}