帶有使用innerHTML的JavaScript的自舉表

Question

我想要使用下面的代碼來正確顯示錶。問題是在for循環將數據輸入到表中之前正在應用</tbody>和</table>標記。表頭顯示正常，數據也很好顯示，只是不在表格中。我究竟做錯了什麼？我試着用if語句將最後一行移入循環中，但同樣發生。

$.getJSON("adriver.php?type=get", function(data, status){ 
    document.getElementById("aRightContent").innerHTML = 
      "<table class='table table-hover'>" + 
      "<thead>" + 
      "<tr>" + 
       "<th><i class='fa fa-check-square'></iclass></th>" + 
       "<th>ID</th>" + 
       "<th>Firstname</th>" + 
       "<th>Lastname</th>" + 
       "<th>UserName</th>" + 
      "</tr>" + 
      "</thead>" + 
      "<tbody>"; 

    for(var i = 0; i < data.length; i++){ 
     document.getElementById("aRightContent").innerHTML += 
       "<tr>" + 
        "<td><input type='radio' name='selectedDriver' value='" + data[i].dID + "'></td>" + 
        "<td>" + data[i].dID + "</td>" + 
        "<td>" + data[i].dFirstName + "</td>" + 
        "<td>" + data[i].dLastName + "</td>" + 
        "<td>" + data[i].dUsername + "</td>" + 
       "</tr>"; 
    } 
    document.getElementById("aRightContent").innerHTML += "</tbody></table>"; 
}); 

謝謝你的幫助。

Answer 1

您不能使用innerHTML添加部分<table>和</table>，因爲瀏覽器往往會爲您填充它。我建議的最佳方式是構建整個HTML，然後追加。

所以，你應該是這樣的：

finalHTML = "<table class='table table-hover'>" + 
     "<thead>" + 
     "<tr>" + 
      "<th><i class='fa fa-check-square'></iclass></th>" + 
      "<th>ID</th>" + 
      "<th>Firstname</th>" + 
      "<th>Lastname</th>" + 
      "<th>UserName</th>" + 
     "</tr>" 
     "</thead>" + 
     "<tbody>"; 
finalHTML += "..." // Other code. 

而且，由於你使用jQuery，使用相同的組件。代替document.getElementById("aRightContent").innerHTML，請使用：

$("#aRightContent").html() 

Answer 2

只寫了整個事情中的字符串：

var htmlString = "<table class='table table-hover'>" + 
     "<thead>" + 
     "<tr>" + 
      "<th><i class='fa fa-check-square'></iclass></th>" + 
      "<th>ID</th>" + 
      "<th>Firstname</th>" + 
      "<th>Lastname</th>" + 
      "<th>UserName</th>" + 
     "</tr>" 
     "</thead>" + 
     "<tbody>"; 

等等

和使用，然後ASIGN到innerHTML = htmlString末。

原因

你不應該分配給document.getElementById("aRightContent").innerHTML一個不完整的一段HTML代碼。