我有一个与包含列和行的表类似的网格,但使用 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];
});
最佳答案
我不确定我是否理解正确,但我会试试这个 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/
如果这不是您想要的,请发布示例结果。
关于javascript - 将数组迭代到自定义网格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39096174/