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.write HTMLElementNodes。 document.write只处理字符串。抓住一个容器元素（例如使用document.getElementById）并附加到
您正在尝试document.write每次向其添加行时写入整个表。表格完成后附加表格，而不是每次进行循环。
你正在各处使用全局变量，学会喜欢var关键字
row1是您正在操作的行的不良变量名称，通常不是第一个

Answer 2

使用document.body.appendChild(...)代替document.write(...)。

Answer 3

您可以通过在嵌套for循环后更改脚本以使用document.body.appendChild(mutable)来执行此操作：

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表格对象追加到网页的<body>元素中。你可以看到它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);
}

我对你的剧本做了一些风格改变，我建议做更多，但就正确性而言，它应该有效。

Javascript表创建

4 个答案: