Заполнение цветом клеток поля шахматной доски

#javascript

Код написал только для нечетных строк:

// присваиваю в переменную table первый дочерний элемент body
//таблицу ""
var table = document.body.children[0];
//запускаю первый цикл для столбцов, то есть [i]
for (var i = 0; i < table.rows.length; i++) {
    //цикл для ячеек в строках, то есть [j]
    for (var j = 0; j < table.rows.length; j++) {
        //меняю фон ячеек на черный
        table.rows[i].cells[j += 1].style.backgroundColor = 'black';
    }
}




Как правильно заполнить доску для всех строк?
    

Ответы
Ответ 1

var table = document.getElementById("board");
for (var i = 0; i < table.rows.length; i++) {
  for (var j = 0; j < table.rows[i].cells.length; j = j + 2) {
    table.rows[i].cells[((i + 1) % 2) + j].style.backgroundColor = 'black';
  }
}
td {
  width: 30px;
  height: 30px;
}



Ответ 2

const table = new Array(8).fill([]).map(row => new Array(8));

//запускаю первый цикл для столбцов,тоесть [i]
for ( var i = 0; i < table.length; i++) {
    //цикл для ячеек в строках,тоесть [j]
   for ( var j = 0 ; j < table[i].length; j++){
      //меняю фон ячеек на черный
      table[i][j] = ((i+j)%2) ? 'black' : 'white';
  }
}

console.log(table);


Ответ 3

Можно варьировать стартовое значение j в зависимости от четности номера строки (i).
Если i четно, то начинаем с j = 1; если нечетно, то с j = 0:



var table = document.body.children[0];
for (var i = 0; i < table.rows.length; i++) {
  for (var j = 1 - i % 2; j < table.rows.length; j += 2) {
    table.rows[i].cells[j].style.backgroundColor = 'black';
  }
}
td {
  width: 40px;
  height: 40px;
  background: white;
}



Ответ 4

Без Js, просто в css добавь



td {
  width:25px;
  height:25px;
}

tr:nth-child(2n+1) td:nth-child(2n+2) {
  background: black;
}

tr:nth-child(2n+2) td:nth-child(2n+1) {
  background: black;
}