javascript - 将数组迭代到自定义网格中

Question

我有一个与包含列和行的表类似的网格，但使用 div 和 span 自定义创建，我想用来自许多数组的值填充每个单元格，但实际上没有用:|
所以这是我生成这些数组的函数:

function generate(count, values) {
    return Array.apply(null, { length: count }).map(function () {
        var r = [],
            array = values.slice();
        while (array.length) {
            r.push(array.splice(Math.floor(Math.random() * array.length), 1)[0]);
        }
        return r;
    });
};

var myStringArray = generate(7, [1, 2, 3, 4, 5, 6, 7]);
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
  console.log(myStringArray[i]);
}

然后我尝试在每一行上添加每个数组，但不幸的是它不起作用。

    Array.from(document.getElementsByClassName('cell')).forEach(function(e, j) {
  e.textContent = myStringArray[i];

});

fiddle:

Answer 1

我不确定我是否理解正确，但我会试试这个 JS 代码。

首先，我们必须获取您的二维数组并计算 x 和 y 坐标。它是你的细胞的索引。如果一行中有 7 个单元格和 4 行，则您有 7*4=28 个输出元素(称为 Cell)。所有 Cell 都位于一维长数组中。在第 7 个元素之后，一个新的行开始(在第 14 个元素之后，依此类推)。列号是索引(一维数组中的 Cell 数)mod 7(一行的元素数)。

索引 0 --> x = 索引 % 7 = 0 % 7 = 0

指数 6 --> x = 指数 % 7 = 6 % 7 = 6

指数 7 --> x = 指数 % 7 = 7 % 7 = 0

现在我们需要行号。这也是索引，但除以 7(一行的元素数)

索引 0 --> y = 索引/7 = 0/7 = 0

索引 6 --> y = 索引/7 = 6/7 = 0.85...

索引 7 --> y = 索引/7 = 7/7 = 1

索引 8 --> y = 索引/7 = 8/7 = 1.14...

1.14 不是一个很好的行号。所以我们必须用 Math.floor 删除点后的数字。

现在我们有了坐标 x 和 y。我们可以在二维数组中使用它们，仅此而已:)

Array.from(document.getElementsByClassName('cell')).forEach(function(e, j){
  //
  var y = Math.floor(j/myStringArray.length);
  var x = j%myStringArray.length;
  e.textContent = myStringArray[y][x] /*+"("+x+","+y+")"*/;
});

编辑 fiddle :https://jsfiddle.net/truvh94a/6/

如果这不是您想要的，请发布示例结果。