Question

所以我试图用javascript和html生成一个数独板。它用于使用javascript DOM的学校项目。我们的想法是使用循环和DOM。

我需要它是3x3的3x3s。所以例如结束html看起来像

<table>
    <tr>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box3"></td>
        <td class="box3"></td>
        <td class="box3"></td>
    </tr>
    <tr>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box3"></td>
        <td class="box3"></td>
        <td class="box3"></td>
    </tr>
    <tr>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box1"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box2"></td>
        <td class="box3"></td>
        <td class="box3"></td>
        <td class="box3"></td>
    </tr>
    <tr>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box6"></td>
        <td class="box6"></td>
        <td class="box6"></td>
    </tr>
    <tr>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box6"></td>
        <td class="box6"></td>
        <td class="box6"></td>
    </tr>
    <tr>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box4"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box5"></td>
        <td class="box6"></td>
        <td class="box6"></td>
        <td class="box6"></td>
    </tr>
    <tr>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box9"></td>
        <td class="box9"></td>
        <td class="box9"></td>
    </tr>
    <tr>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box9"></td>
        <td class="box9"></td>
        <td class="box9"></td>
    </tr>
    <tr>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box7"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box8"></td>
        <td class="box9"></td>
        <td class="box9"></td>
        <td class="box9"></td>
    </tr>
</table>

这是我提出的代码，但它并没有像我想要的那样工作。请检查jsfiddle看看。我想知道是否有人可以帮助我。

function myFunction(){

    for(x=1;x<4;x++){

        var tabley = document.getElementById("myTable");
        tabley.insertAdjacentHTML('beforeend','<tr>');

        for(i=1;i<4;i++){

            tabley.insertAdjacentHTML('beforeend','<td class="box" id="' + i + '">' + i + '</td>');

        }

        var tabley = document.getElementById("myTable");
        tabley.insertAdjacentHTML('beforeend','</tr>');
    }
}

https://jsfiddle.net/oodma31u/1/

另外，我现在并不担心编号。我可以自己解决这个问题。

谢谢你们！

Answer 1

不要这样做。在JS中做数据，只需使用html显示它。例如：

var board=[
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9],
[1,2,3,4,5,6,7,8,9]
];

现在您可以像这样访问某个位置：

board[y][x]=value;
//e. g.
board[0][0]=2;

要显示它，请执行：

document.body.innerHTML="<table><tr>"+board.map(row=>"<td>"+row.join("</td><td>")+"</td>").join("</tr><tr>")+"</tr></table>";

http://jsbin.com/yizoquqoni/edit?output

用DOM在javascript中创建一个数独表

1 个答案: