JavaScript：创建一个文本框数组答案

【问题标题】：JavaScript: creating an array of text boxesJavaScript：创建一个文本框数组
【发布时间】：2014-04-11 21:53:41
【问题描述】：

我希望使用纯 JavaScript 创建一个相对于现有方形 div 的 3x3 文本输入框网格。最好我想构建一个单个 1D 数组的网格，该网格每三个框循环一次（如果没有，那么输入框数组的数组就可以了——我希望这是有道理的）。这就是我的代码目前的样子，但是当我循环数组长度时，只有三个框显示（如果我不这样做，那么数组会线性延伸到 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]);      
     }

如何让网格正确显示？

【问题讨论】：

你可能想在这里使用类
为什么不直接创建一个<table> 的文本框？
您的所有 9 个元素都在生成，但它们彼此堆叠在一起。您需要应用 margin-left 类型逻辑来垂直定位块。取决于i 的值，类似于 0、35 和 70 的 margin-top。
我确实尝试将 marginTop 与 'i' 一起使用，但它会创建一个对角分布，因为 i 每次迭代都会发生变化。

标签： javascript html css arrays

【解决方案1】：

我会结合使用 javascript 和 CSS

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

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;
}

【讨论】：