JavaScript：創建文本框數組

Question

我正在尋找使用純JavaScript相對於現有平方div創建3x3文本輸入框的網格。 最好是，我想構造一個在每個第三個方框中循環的單個一維數組的網格（如果沒有，那么輸入框數組的數組就可以了-我希望這是有道理的）。 這是我目前的代碼，但是當我循環數組長度時，只有三個框顯示出來（如果我不這樣做，則數組將線性地延伸到div范圍之外）：

var row0 = new Array(9);

for (var i = 0; i < 9; ++i)
     {
            row0[i] = document.createElement('input');
            row0[i].style.position = "absolute";
            row0[i].type = "text";  
            row0[i].style.marginLeft = 35px *i % 105  + "px";
            row0[i].style.width = "35px";
            row0[i].style.height = "35px";
            document.getElementById('block1').appendChild(row0[i]);      
     }

如何使網格正確顯示？

Answer 1

我會結合使用javascript和CSS

演示http://jsfiddle.net/x8dSP/3010/

JS

window.onload = function () {
    var parent_div = document.createElement("div")
    parent_div.id = "parent"
    document.body.appendChild(parent_div);

    var x = 0;
    while (x < 9) {
        var child_input = document.createElement("input")
        child_input.className = "child"
        document.getElementById(parent_div.id).appendChild(child_input);
        x++;
    }
}

CSS

div {
    width: 150px;
}
input {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 5px;
}