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 that you have read and understand our privacy policy and code of conduct.

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