创建嵌套表答案

【问题标题】：Creating nested tables创建嵌套表
【发布时间】：2013-02-16 05:14:08
【问题描述】：

美好的一天。我正在尝试创建嵌套表一百次。但是，我的代码创建了一个主表，然后在其中有 100 个单独的表。（感谢 Sachin 爵士的帮助）我需要的是表中的表。请帮我修复代码。

<html>
<head> <title> Hello! </title> 

<script type="text/javascript">
function add() { 
    var ni = document.getElementById('myDiv');
    var numi = document.getElementById('theValue');
    var num = (document.getElementById('theValue').value -1)+ 2;
    numi.value = num;
    var newdiv = document.createElement('div');
    var divIdName = 'my'+num+'Div';
    newdiv.setAttribute('id',divIdName);
    newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value=1 id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
    ni.appendChild(newdiv);
    for(var i=1;i<100;i++) {
        var ni = document.getElementById(divIdName);
        var numi = document.getElementById('theValue');
        var num = (document.getElementById('theValue').value -1)+ 2;
        numi.value = num;
        var newdiv = document.createElement('div');
        var divIdName = 'my'+num+'Div';
        newdiv.setAttribute('id',divIdName);
        var j=i++;
        newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value='" + j + "' id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
        ni.appendChild(newdiv);
    }
}
</script>

</head>
<body onload="add()">
<table border="1">
    <tr>
        <td> Hello! <input type='hidden' value='0' id='theValue' />

        <div id='myDiv'> </div> </td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

您能否描述一下什么不起作用或给我们您的代码的 JSFiddle 以便我们自己查看？
DOM 操作很慢。您最好将其构建为字符串并在最后一次性插入。
隐藏输入有什么用？你需要嵌套的隐藏输入吗？为什么他们都有相同的id？
@Benmj 不是在表中的表中创建表（100x），而是创建一个主表，然后在该主表中，有 100 个单独的表（未嵌套）。我试过 JSFiddle，但它的输出与浏览器的不同。 :)
@Pete 我使用输入标签来更改 div id。 :)

标签： javascript html dom html-table

【解决方案1】：

应该这样做（我已经删除了隐藏的输入，因为它不需要）：http://jsfiddle.net/rPR9w/1/

function add() {
    for (i=1; i<=100; i++) {
        addAnother(i);
    }
}


function addAnother(counter) { 
    var container = document.getElementById('myDiv' + counter);
    container.innerHTML = makeTable(counter + 1);
}

function makeTable(counter) {

    return "<table border=1><tr><td> Hello! <div id='myDiv" + counter + "'></td></tr></table>";

}

【讨论】：

非常感谢您，先生！ :)
好像还不错！