javascript - 使用 DOM 在 javascript 中制作数独表

Question

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

我需要它是 3x3 的 3x3。例如，最终的 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