Цикл
A for - это блок кода, который содержит 3 оператора: первый инициализирует цикл для использования, второй оценивает условие, которое должно быть выражено перед каждой итерацией цикла, а третий оператор выполняется до тех пор, пока второй условие оценивается как true.
Все 3 оператора являются необязательными, если вы добавите точку с запятой, чтобы дать интерпретатору Javascript знать, что определяющая логика для цикла for находится в другом месте кода.
Таким образом, технически вы можете создать цикл for, в котором все три оператора опущены следующим образом:
var i = 0;
for (;;) {
if (i > 3) { break; } console.log(i);
i++;
}
Это может быть использовано для создания действительно сложных циклов. Будьте осторожны, потому что ваш цикл будет работать бесконечно, если логика вашего кода не определена правильно.
При программном создании таблицы действительно является стандартной практикой использование вложенных for циклов, повторяющих вложенные массивы (иначе называемые многомерными массивами ), и на самом деле нет причин, по которым вы не должны:
// Create a nested array. Access individual values like multi[...][...]
var multi = [
['lion', 'tiger', 'elephant', 'snake', 'bear'],
['mane', 'stripes', 'trunk', 'slither', 'claws']
];
var arr1 = multi[0], arr2 = multi[1];
var table = '<table id = "timetable">';
for (var i = 0; i < multi.length; i++) {
table += '<tr>';
for (var j = 0; j < multi[i].length; j++) {
table += '<td class = "text-centre">' + multi[i][j] + '</td>';
}
table += '</tr>';
}
table += '</table>';
document.body.innerHTML = table;
Но, если вы действительно действительно хотите, вы можете сделать это следующим образом, используя только один цикл for:
// as you can see, this is way more convoluted and prone to error
// Create a nested array. Access individual values like multi[...][...]
var multi = [
['lion', 'tiger', 'elephant', 'snake', 'bear'],
['mane', 'stripes', 'trunk', 'slither', 'claws']
];
var table = '<table id = "timetable">';
for (var j = 0, k = 0; j < multi.length; ) { // third statement omitted. will run until j = 2.
// add a tr at the beginning and end of the table row
if (k === 0) { table += '<tr>' }
table += '<td class = "text-centre">' + multi[j][k] + '</td>';
if (k === (multi[j].length-1)) {
k = 0; // reset k to zero for iteration
table += '</tr>';
j++; // increment j;
} else {
k++;
}
}
table += '</table>';
document.body.innerHTML = table;
For петли: здесь и здесь .
P.S., вам на самом деле не нужно создавать атрибут класса для каждого элемента <td>. Вы можете использовать селектор потомков CSS 2.1. Это будет соответствовать каждому td элементу, вложенному в #timetable, независимо от того, насколько глубоко: #timetable td { text-align: center; }