创建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); 
} 

我做了一些风格改变你的脚本，我建议做更多，但是只要正确，它应该工作。