0

Есть табличка 8x8. По дефолту каждая ее клетка имеет белый цвет, я хочу окрасить их в шахматном порядке. Немного поизучав NodeList я написал следующий код. Как мне сделать чтобы клетки красились в шахматном порядке? Есть идея чтобы менять алгоритм окраски каждую строку, но как это сделать не представляю.

let chess_plate_cells = document.querySelectorAll('table>tbody>tr>td');
let chess_plate_rows = document.querySelectorAll('table>tbody>tr');

chess_plate_cells.forEach(function(cell, index, list){
    if(index%2 == 0){
        cell.classList.toggle('black-cell')
    }
        else {cell.classList.toggle('white-cell')}
})
* {
    padding: 0;
    margin: 0;
}

body {
    background-color: darkslateblue;
}

td {
    background-color: white;
    width: 5vw;
    height: 5vw;
}

table {
    empty-cells: show;
}

.black-cell {
    background-color: black;
}

.white-cell {
    background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess Plate</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <table class="chess-plate">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
    <script src="script.js"></script>
</body>

</html>

1
  • 1
    Каждая клетка определяется колонкой и строкой. Сейчас для окраски используется только номер колонки (если четная - то клетка черная), а нужно учитывать оба параметра. 13 окт 2022 в 10:00

3 ответа 3

2

Нужно два цикла: один для рядов, другой для клеток в текущем ряду. И проверять нужно четность и того, и другого.

Ниже пример:

let chess_plate_rows = document.querySelectorAll('table>tbody>tr');

chess_plate_rows.forEach(function(row, index){
    let chess_plate_row_cells = row.querySelectorAll('td');
    chess_plate_row_cells.forEach(function(cell, i){
      if((index + i) % 2 == 0) { // было if (index %2 == 0 && i % 2 == 0 || index %2 == 1 && i % 2 == 1)
        cell.classList.toggle('black-cell')
      }
        else {cell.classList.toggle('white-cell')}
        
     })
})
* {
    padding: 0;
    margin: 0;
}

body {
    background-color: darkslateblue;
}

td {
    background-color: white;
    width: 5vw;
    height: 5vw;
}

table {
    empty-cells: show;
}

.black-cell {
    background-color: black;
}

.white-cell {
    background-color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chess Plate</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <table class="chess-plate">
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </div>
    <script src="script.js"></script>
</body>

</html>

UPD: Добавлена правка от @Эникейщик

3
  • 1
    О как, такой же ответ) Удалю свой тогда)
    – De.Minov
    13 окт 2022 в 10:07
  • 3
    монстра if (index %2 == 0 && i % 2 == 0 || index %2 == 1 && i % 2 == 1) можно заменить на if ((index + i) % 2 == 0). Достаточно проверить четность суммы номеров ряда и строки. 13 окт 2022 в 10:12
  • 1
    @Эникейщик, точно, спасибо, поправил ответ
    – rusgeli
    13 окт 2022 в 10:20
2

Могу еще предложить вариант на чистом CSS с использованием nth-child

body {
  background: gray;
}
.chess-plate tr td {
  width: 32px;
  height: 32px;
}
.chess-plate tr td,
.chess-plate tr:nth-child(2n) td:nth-child(2n) {
  background: black;
}
.chess-plate tr:nth-child(2n) td,
.chess-plate tr td:nth-child(2n) {
  background: white;
}

/*

ИЛИ

.chess-plate tr td {
  width: 32px;
  height: 32px;
  background: white;
}
.chess-plate tr:nth-child(2n) td:nth-child(2n),
.chess-plate tr:not(:nth-child(2n)) td:not(:nth-child(2n)) {
  background: black;
}

*/
<table class="chess-plate">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

0

А надо было изучать css...

* {
  padding: 0;
  margin: 0;
}

body {
  background: darkslateblue;
}

td {
  background: white;
  width: 5vw;
  height: 5vw;
}

tr:nth-child(odd) > td:nth-child(even),
tr:nth-child(even) > td:nth-child(odd) {
  background: black;
}
<table>
  <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>

Ваш ответ

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

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