HTML：使用innerHTML繪製表格

Question

document.getElementById("outputDiv").innerHTML = ""; 
document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    document.getElementById("outputDiv").innerHTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
document.getElementById("outputDiv").innerHTML += "</tr></table>"; 

我想使用Javascript繪製表格。 所以我寫了上面的代碼。 我認爲它繪製有10列一列，但它不工作。 任何人都知道這個問題？

Answer 1

我認爲主要的問題是，你的屬性中沒有報價。

但是，在循環中反覆更新dom元素的內容幾乎總是一個壞主意 - 每次更新dom內容時，都會導致瀏覽器執行一些內部工作，以確保頁面佈局是最新的。

我將建立HTML字符串本地安裝，然後作出一個最後的更新完成時。 （當然，請確保您的屬性均以）

document.getElementById("outputDiv").innerHTML = ""; 

var newTable = "<table border='1' width='100%'><tr>"; 
for(j = 1; j <= 10; j++) { //opening braces should always be on the same line in JS 
    newTable += "<td align='center'>" + String.fromCharCode(j+64) + "</td>"; 
} 
newTable += "</tr></table>"; 

document.getElementById("outputDiv").innerHTML = newTable; 

Answer 2

我多年前就遇到了這個問題，太。

的問題是，當您使用innerHTML屬性添加HTML，每次更新後，底層引擎將關閉未關閉標籤（和修復等不良HTML）爲您服務。所以第二個線之後，<table>和<tr>標籤都自動關閉，之後的所有內容將只在表外進行寫操作。

---

方法1 （最簡單的方法）

用來存儲整個表中的HTML和一次更新所有的字符串。

var HTML = "<table border=1 width=100%><tr>"; 
for(j=1;j<=10;j++) 
{ 
    HTML += "<td align=center>"+String.fromCharCode(j+64)+"</td>"; 
} 
HTML += "</tr></table>"; 
document.getElementById("outputDiv").innerHTML = HTML; 

Fiddle

---

方法2 （更好的方法）

使用DOM函數

var table = document.createElement('table'); 
table.setAttribute('border','1'); 
table.setAttribute('width','100%') 
var row = table.insertRow(0); 
for(j=1; j<=10; j++){ 
    var text = document.createTextNode(String.fromCharCode(j+64)); 
    var cell = row.insertCell(j-1); 
    cell.setAttribute('align','center') 
    cell.appendChild(text); 
} 
document.getElementById("outputDiv").appendChild(table); 

Fiddle

---

方法2增強 （該然而更好的方法）

使用CSS，而不是HTML屬性。後者通常按最新規格折舊。

一個很好的資源開始學習CSS是Mozilla Developer Network

Fiddle

---

方法3 （很長的路要走，但長期來看是最好的）

使用jQuery。

$('<table>').append('<tr>').appendTo('#outputDiv'); 
for(j=1; j<=10; j++) 
    $('<td>').text(String.fromCharCode(j+64)).appendTo('tr'); 

Fiddle