Истерируйте массив в пользовательскую сетку

У меня есть сетка, похожая на таблицу со столбцами и строками, но настраиваемую с помощью div и span и я хочу заполнить каждую ячейку значениями из многих массивов и на самом деле не работает: |
так это моя функция, generay эти массивы:Истерируйте массив в пользовательскую сетку

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:

источник

2016-08-23 mcmwhfy

Я не уверен, если я правильно Вас понял, но я хотел бы попробовать этот JS-код.

Сначала мы должны взять ваш 2D-массив и вычислить координаты x и y. Его индекс ваших клеток. Если у вас 7 ячеек в строке и 4 строках, у вас есть 7 * 4 = 28 выходных элементов (называется Cell). Все Cell, где в длинном массиве 1D. После 7-го элемента начинается новая строка (и после 14-го и так далее). Номер столбца - это индекс (номер Cell внутри вашего 1D-массива) mod 7 (количество элементов одной строки).

Индекс 0 -> х = Индекс% 7 = 0% 7 = 0

Индекс 6 -> х = Индекс% 7 = 6% 7 = 6

Индекс 7 -> х = Индекс% 7 = 7% 7 = 0

Теперь нам понадобится номер строки. Это также индекс, но делится на 7 (число элементов одного ряда)

Индекс 0 -> у = Индекс/7 = 0/7 = 0

Индекс 6 -> у = Index/7 = 6/7 = 0,85 ...

Индекс 7 -> у = Индекс/= 7 7/7 = 1

Индекс 8 -> у = Индекс/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/

Если это не то, что вы хотите, пожалуйста, напишите пример результата.

источник

2016-08-23 08:47:16 Marcus

да что-то подобное, но я получаю сообщение об ошибке: TypeError: myStringArray [у] не определен – mcmwhfy

, и я думаю, вы должны использовать также Math.Round() с Math.floor вставить закругленный номер. – mcmwhfy

'Math.floor' в этом случае лучше, потому что мне нужно следующее« меньшее »число (обрезанное число после десятичной точки) – Marcus

Другой подход к вашей проблеме с двумя менее конкретными функциями полезности, чем ваш 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]; 
    }); 
});

источник

2016-08-23 09:23:17 Thomas

Истерируйте массив в пользовательскую сетку

ответ

Смежные вопросы