Как перечислить html ячейки таблицы (игра змей и лестниц)? - PullRequest
Новая
       20

Как перечислить html ячейки таблицы (игра змей и лестниц)?

0 голосов
/ 09 мая 2019

У меня есть следующий код JS: 

    var playboard = [
        [" ", " ", "s", " ", "|", " "],
        [" ", "/", " ", " ", "|", " "],
        ["t", " ", "\\", "s", "|", " "],
        [" ", "|", "t", "\\", " ", "s"],
        [" ", "|", " ", " ", "/", " "],
        [" ", "|", " ", "t", " ", " "],
        ];
    var document;
    var doc = document;
    var table = doc.createElement('table');
    
    for( var r = 0; r < playboard.length; r++ ) {
        var row = doc.createElement('tr');
    
        for( var c = 0; c < playboard[r].length; c++ ) {
            var symbol = playboard[r][c];
            var col = doc.createElement('td');
            
    //trying to enumerate the cells
                for(var cellNumber=1; cellNumber<playboard.length; cellNumber++){
                col.append(cellNumber);
                }
            
            var className = '';
            
            if (symbol === 's') {
                className = 'snakeHead';
            }
            else if( symbol === '/' ) {
                className = 'snakeBody';
            }
            else if( symbol === 't' ) {
                className = 'snakeTail';
            }
            else if (symbol === '|') {
                className = 'ladderUp';
            }
            else if (symbol === '\\') {
                className = 'ladderUpLeft';
            }
            else if (symbol === ' ') {
                className = 'empty'
            }
    
            col.setAttribute('class', className);
    
            row.appendChild(col);
        }
    
        table.appendChild(row);
    }
    
    window.onload = function() {
        document.body.appendChild(table);
    }
    <html >
    <head>
        <title> Snakes and ladders </title>
        <script src="scriptSnakesAndLadders.js"></script>
        <link rel="stylesheet" type="text/css" href="styleSnakesAndLadders.css">
    </head>
    <body>
    <h1>Snakes and ladders</h1>
    </body>
    </html>

Я пытаюсь перечислить ячейки таблицы от 1 до 36, используя цикл for. Код, который я имею, кажется неправильным, потому что он записывает 12345 внутри каждой ячейки таблицы. Идея состоит в том, чтобы иметь что-то вроде пронумерованной таблицы в этой ссылке, но мне немного сложно это понять. Как я могу это сделать? (принимаются другие решения, кроме цикла)

1 Ответ

0 голосов
/ 09 мая 2019

Я вижу несколько проблем с этим, но я ударю только на 2, поскольку они напрямую связаны с вашим вопросом.

Во-первых, у вас есть три цикла.Тот, что находится прямо над тегом TR, является вашим циклом создания строк.Цикл прямо над тегом TD - это цикл создания вашей ячейки.Тот, что под вашим комментарием, просто вставляет текст и не влияет на ваши ячейки, не говоря уже о создании новых ячеек.Уберите аспект цикла, и вы увидите лучшие результаты.

Во-вторых, вам нужно идентифицировать каждую ячейку в легкодоступном виде.Я бы предложил создать HTML-идентификатор, похожий на: "cell" + r + c;Вы хотите убедиться, что ваш идентификатор будет выглядеть как «cell12» и «cell32» вместо «cell7», обрабатывая переменные r и c как строки.

Существует множество других проблем, которые выНужно, чтобы кто-то с большим опытом сел и научил вас лучшим способам делать что-то, например, заменить ваш if ... else if ... else переключателем.Это все часть процесса обучения, который идет гораздо дальше вашего вопроса, и обучение всем мелочам, которые могут вам помочь, выходит за рамки этого сайта.

...