Шахматная доска на js/css/html

@sverestel · Регистрация: 02.02.2016

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

Здравствуйте, есть задача.Нужно вывести шахматную доску определенной размерности на страничке, но в будущем потребуется обращение к какой-либо клетке этой доски , но ум приходит реализация через стандартный двумерный массив. Но вот вопрос, можно ли как-то индексировать добавление узлы (клетки) в виде x,y координаты и обращаться к ним в будущем?
Сейчас доска заполняется детьми с использованием flex-flow:

CSS

.Board_with_odd
{
    border:1px solid tomato;
    margin: 5% auto;
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
}
.Board_with_odd :nth-child(2n + 1) {
    background-color: #E3F2FD;
}
 
.Board_with_odd :nth-child(2n) {
    background-color: #01579B;
}
.field
{
    width: 50px;
    height: 50px;
    background-color: #c23;
}

Вот код js, который добавляет новые узлы в родителя board_on_page:

Javascript

   var board = []
   for(var i = 0 ; i<N ; i++ )
    {
        board[i] = []
    }
    
    for(var i = 0 ; i<N ; i++ )
    {
        for(var j = 0 ; j<N ; j++ )
        {
            board[i][j] = document.createElement("div");
        }
    }

Javascript

for(var i = 0 ; i<N ; i++ )
    {
        for(var j = 0 ; j<N ; j++)
            board_on_page.appendChild(board[i][j]).classList.add("field");
    }

Но как можно догадаться, дети добавляются линейно и, из-за свойства flex-flow, устанавливаются в нужное положение.
Также в прикрепе скинул скрин получившийся доски.

@nubideus · 04.12.2017, 02:01

Javascript

1	board[y][x]

@klopp · 04.12.2017, 04:04

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

можно ли как-то индексировать добавление узлы (клетки)

во время добавления можно прописывать какой-нибудь атрибут,и затем по нему обращаться
например,покликайте по доске

@klopp 566 / 465 / 183 Регистрация: 14.10.2017 Сообщений: 1,259
	04.12.2017, 04:04	3
	Сообщение от sverestel можно ли как-то индексировать добавление узлы (клетки) во время добавления можно прописывать какой-нибудь атрибут,и затем по нему обращаться например,покликайте по доске 1