Как окрасить шахматную доску с помощью if?

Question

[laman27]

https://jsfiddle.net/qybzj5uv/47/
У меня такая таблица, хочу сделать из нее шахматную доску с помощью if.

Answer 1

[profesor08]

Как вариант можешь стилями их раскрасить, без необходимости в js.

tr:nth-child(odd) td:nth-child(odd) {
  background: white;
}

tr:nth-child(odd) td:nth-child(even) {
  background: black;
}

tr:nth-child(even) td:nth-child(even) {
  background: white;
}

tr:nth-child(even) td:nth-child(odd) {
  background: black;
}

Answer 2

[0xD34F]

Стили для раскрашивания клеток:

.black { background: black; }
.white { background: white; }

Размеры доски:

const rows = 8;
const cols = 8;

Создавать доску можно через генерацию разметки:

document.querySelector('.info').innerHTML = `
  <table>${Array.from({ length: rows }, (_, i) => `
    <tr>${Array.from({ length: cols }, (_, j) => `
      <td class="${(i ^ j) & 1 ? 'black' : 'white'}"></td>`).join('')}
    </tr>`).join('')}
  </table>`;

Или, создавая её элементы напрямую:

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {
  const tr = table.insertRow();
  for (let j = 0; j < cols; j++) {
    tr.insertCell().classList.add([ 'white', 'black' ][(i ^ j) & 1]);
  }
}

document.querySelector('.info').append(table);

Comments

[Владимир Проскурин]

Еще проще вот такое выражение
(i + j) % 2 ? 'black' : 'white'

Answer 3

[Stalker_RED]