在DOM中创建一个数独的表 [英] making a sudoku table in javascript with DOM
问题描述
所以我试图用javascript和html生成一个数独的棋盘。它的一个学校项目使用JavaScript DOM。这个想法是使用循环和DOM。
So Im trying to generate a sudoku board using javascript and html. Its for a school project using javascript DOM. The idea is to use loops and DOM.
我需要它是3x3的3x3。所以例如结束html看起来像
I need it to be a 3x3 of 3x3s. so for instance the end html make look like
<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看看。我想知道有人可以帮助我吗
This is the code I have come up with but it doesn't work the way I intented it to. please check the jsfiddle to see. I was wondering if anyone could help me with this.
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/
还有，我是不担心现在的编号。我可以自己工作。
also, i'm not worried about the numbering for now. I can work that out on my own.
谢谢你们！
推荐答案
不要这样做。在JS中进行数据，只需使用html显示。例如：
Dont do it like this. Do the data in JS, just display it using html.For example:
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]
];
现在您可以访问某个职位：
Now you can access a certain Position like this:
board[y][x]=value;
//e. g.
board[0][0]=2;
要显示，请执行以下操作：
To display it, do:
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中创建一个数独的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
