3

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

// присваиваю в переменную table первый дочерний элемент body
//таблицу "<table>"
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';
    }
}

результат

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

4 ответа 4

5

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;
}
<table id="board" border="1">
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
</table>

1
  • Получется написал код для второй строки...)) спасибо всем за ответы !! Игорь ты ответил первый, поэтому выбираю твой ответ! 6 окт 2017 в 14:16
4

Можно варьировать стартовое значение 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;
}
<table>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

2
  • Спасибо за ответ!!!но Игорь первый ответил,без обид! 6 окт 2017 в 14:18
  • всем - плюс тысячу очков
    – user176262
    6 окт 2017 в 14:19
3

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

1
2

Без 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;
}
<table id="board" border="1">
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
  <tr><td/><td/><td/><td/><td/><td/><td/><td/></tr>
</table>

2
  • Спасибо за ответ, но с джаваскрипт интересней 6 окт 2017 в 20:39
  • @ВладимирВладимирович, зато производительней. Если это не необходимая часть JS - лучше возложить это на рендер.
    – user207618
    6 окт 2017 в 20:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.