創建Javascript表格

Question

嘗試使用以下代碼創建表格，但無法使用。請指出我要出錯的地方。

var i,j; 

function cell(ih){ 
    var tcell =document.createElement('td'); 
    tcell.innerHTML=ih; 
    return tcell; 
} 

mutable=document.createElement('table'); 
for (i=0;i<10;i++){ 
    row1=document.createElement('tr'); 
    for(j=0;j<10;j++){ 
     row1.appendChild(cell(j)); 
    } 
    mutable.appendChild(row1); 
    document.write(mutable); 
} 

Answer 1

使用document.body.appendChild(...)，而不是document.write(...)。

Answer 2

你有幾個問題，第一個兩個是大的，後兩個是與其他代碼衝突的風格和風險問題：

1. 您正在嘗試document.write HTMLElementNodes。 document.write只處理字符串。抓取一個容器元素（例如document.getElementById）並追加到它
2. 您正在嘗試document.write整個表，每次你添加一行到它。在表格完成後附加表格，而不是每次經過循環。
3. 您正在使用全局所有的地方，學會愛var關鍵字
4. row1爲一個貧窮的變量名你是哪個操作行通常不是第一個

Answer 3

你可以通過改變你的腳本後使用document.body.appendChild(mutable)做你嵌套for循環：

var i,j; 

function cell(ih){ 
    var tcell =document.createElement('td'); 
    tcell.innerHTML=ih; 
    return tcell; 
} 

mutable=document.createElement('table'); 
for (i=0;i<10;i++){ 
    row1=document.createElement('tr'); 
    for(j=0;j<10;j++){ 
     row1.appendChild(cell(j)); 
    } 
    mutable.appendChild(row1); 
} 
document.body.appendChild(mutable); 

此附加您創建到整個mutable表對象您網頁的元素。你可以看到它working here。

Answer 4

另請注意，大多數時候在標記中，您看不到<tbody>元素，但最好將其作爲<table>的子元素並作爲所有行的父元素添加。所以，你的腳本應該看起來更像是這樣的：

function cell(ih){ 
    var tcell = document.createElement('td'); 
    tcell.innerHTML = ih; // I would suggest you use document.createTextNode(ih) instead 
    return tcell; 
} 

function appendTable() { // you now have to call this function some time 
    mutable = document.createElement("table"); 
    var tBody = mutable.appendChild(document.createElement("tbody")); // technique using "fluid interfaces" 
    for (var i = 0; i < 10; i++) { 
     var row1 = tBody.appendChild(document.createElement('tr')); // fluid interface call again 
     for(var j = 0; j < 10; j++) { 
      row1.appendChild(cell(j)); 
     } 
    } 
    document.body.appendChild(mutable); 
} 

我做了一些風格改變你的腳本，我建議做更多，但是隻要正確，它應該工作。