Question

我有一个类似于带有列和行的表的网格，但是使用div和spans创建自定义，我希望使用来自许多数组的值填充每个单元格并且不能正常工作：|
所以这是我的功能，使这些数组生成：

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

并且我试着在每一行上添加每个数组但是unfortunatley不能正常工作。

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

});

fiddle:

Answer 1

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

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

索引0 - ＆gt; x =指数％7 = 0％7 = 0

指数6 - ＆gt; x =指数％7 = 6％7 = 6

索引7 - ＆gt; x =指数％7 = 7％7 = 0

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

索引0 - ＆gt; y = Index / 7 = 0/7 = 0

指数6 - ＆gt; y =指数/ 7 = 6/7 = 0.85 ......

索引7 - ＆gt; y =指数/ 7 = 7/7 = 1

索引8 - ＆gt; y =指数/ 7 = 8/7 = 1.14 ......

1.14不是一个不错的行号。所以我们必须在Math.floor点之后剪掉数字。

现在我们有坐标x和y。我们可以在2D数组中使用它们，就是这样：）

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+")"*/;
});

编辑小提琴：https://jsfiddle.net/truvh94a/6/

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

Answer 2

使用两个不太具体的效用函数来解决问题的另一种方法，而不是generate。

//retuns an Array of nodes that match the css-selector
function $$(selector, ctx){
    if(!ctx || !ctx.querySelectorAll) ctx = document;
    return Array.from(ctx.querySelectorAll(selector));
}

//shuffles an Array in place and returns it
function shuffle(arr){
    for(var i=arr.length, j, tmp; i-->1;){
        tmp = arr[ j = 0|(Math.random() * i) ];
        arr[j] = arr[i];
        arr[i] = tmp;
    }
    return arr;
}

//forEach `.row` ...
$$('.row').forEach(function(row){
    // ... generate a shuffled sequence ...
    var values = shuffle([1,2,3,4,5,6,7]);
    //... and apply the values to the `.cell`s textContent
    $$('.cell', row).forEach(function(cell, i){
        cell.textContent = values[i];
    });
});

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

2 个答案: