Question

我有以下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>

我正在尝试使用for循环枚举表中从1到36的单元格。我的代码似乎是错误的，因为它在表的每个单元格内写入了12345。这个想法是在this链接中有一个编号表，但是对我来说有点复杂。我怎样才能做到这一点？（可接受除循环以外的其他解决方案）

Answer 1

我看到了几个问题，但是我只会打2个，因为它们与您的问题直接相关。

首先是您有三个循环。在TR标签上方的是行创建者循环。 TD标签上方的循环是您的单元格创建循环。在您的注释下的那个仅会插入文本中，不会影响您的单元格，更不用说创建新单元格了。删除循环方面，您会看到更好的结果。

第二，您需要以易于访问的方式标识每个单元格。我建议创建类似于以下内容的HTML ID：“ cell” + r + c;您现在需要通过将r和c变量视为字符串来确保ID像“ cell12”和“ cell32”一样出现，而不是“ cell7”。

还有许多其他问题，您需要其他人坐下来，教给您更好的操作方法，例如用开关替换if ... else if ... else。这是整个学习过程的一部分，它比您提出的问题要重要得多，并且教给您所有可以帮助您的小知识超出了本网站的范围。

如何枚举HTML表单元格（蛇和梯子游戏）？

1 个答案: