Код шахматной доски

@vvm28 · Регистрация: 22.12.2013

Студворк — интернет-сервис помощи студентам

Дан код выводящий шахматную доску.
Но доска отображается не правильно.
Исправьте, пожалуйста, код так, чтобы шахматная доска отображалась более правильно.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chess Board</title>
  <style>
    .chessboard {
      display: grid;
      grid-template-columns: repeat(8, 50px);
      grid-template-rows: repeat(8, 50px);
    }
 
    .chessboard > div {
      border: 1px solid black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
 
    .white {
      background-color: white;
      color: black;
    }
 
    .black {
      background-color: black;
      color: white;
    }
  </style>
</head>
<body>
  <div class="chessboard" id="board">
  </div>
 
  <script>
    // JavaScript code to generate the chessboard
    function generateChessboard() {
      let chessboard = '';
 
      for (let i = 8; i >= 1; i--) {
        chessboard += '<div class="row">' + i + '</div>';
        for (let j = 1; j <= 8; j++) {
          if ((i + j) % 2 === 0) {
            chessboard += '<div class="black"></div>';
          } else {
            chessboard += '<div class="white"></div>';
          }
        }
      }
 
      chessboard += '<div class="row"></div>';
      chessboard += '<div class="col">a</div>';
      chessboard += '<div class="col">b</div>';
      chessboard += '<div class="col">c</div>';
      chessboard += '<div class="col">d</div>';
      chessboard += '<div class="col">e</div>';
      chessboard += '<div class="col">f</div>';
      chessboard += '<div class="col">g</div>';
      chessboard += '<div class="col">h</div>';
 
      document.getElementById('board').innerHTML = chessboard;
    }
 
    generateChessboard();
  </script>
</body>
</html>

@Eva Rosalene · 04.01.2024, 19:18

CSS
1
2
grid-template-columns: repeat(9, 50px);
grid-template-rows: repeat(9, 50px);

Добавлено через 38 секунд
демо с этим исправлением: https://codepen.io/eva-rosalene/pen/eYXJMQr

@klyapa · 04.01.2024, 23:28

HTML5
1
<body></body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
table {
    border-collapse: collapse;
    text-align: center;
}
tr:not(:last-child) td:not(:first-child) {
    width: 50px;
    height: 50px;   
    background: #e1e1e1;
}
tr:not(:last-child):nth-child(odd) td:not(:first-child):nth-child(odd),
tr:not(:last-child):nth-child(even) td:not(:first-child):nth-child(even) {
    background: #050505;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function generateChessboard() {
    let ltrs = ['', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];    
    let tab = ['table', 'tbody'].reduce(
        (a, b) => a.appendChild(document.createElement(b)), document.body
    );
    for(let i = 0; i < 9; i++) {
        for(let j = 0, tr = tab.insertRow(0); j < 9; j++) {
            tr.insertCell().innerHTML = !j && i ? i : i ? '' : ltrs[j];
        }
    }
}
generateChessboard();

@vvm28 · 05.01.2024, 00:25 **[ТС]**

Eva Rosalene, Я попросил чатГПТ поправить этот код и иный ответ в точности совпал с вашим.
klyapa, Спасибо. Красивый код. Я бы так не смог. У меня не хватило бы знаний.

Не могли бы вы подробней рассказать как работает:

Сообщение от klyapa

let tab = ['table', 'tbody'].reduce(
(a, b) => a.appendChild(document.createElement(b)) , document.body
);

и

Code
1
tr.insertCell().innerHTML = !j && i ? i : i ? '' : ltrs[j];

И где можно почитать.

krvsa · 05.01.2024, 10:45

Сообщение от vvm28

И где можно почитать.

В любом учебнике...
Например в этом https://learn.javascript.ru
Смотри:
- методы массивов
- тернарный оператор

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

Код шахматной доски

Решение