making a sudoku table in javascript with DOM

Question

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.

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>

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.

Thanks guys!

What's the question?

Dave Newton
– Dave Newton

2017-03-10 17:02:26 +00:00
Commented Mar 10, 2017 at 17:02 — Dave Newton
– Dave Newton, Commented Mar 10, 2017 at 17:02
no need to redeclare tabley three times...

Jonas Wilms
– Jonas Wilms

2017-03-10 17:10:00 +00:00
Commented Mar 10, 2017 at 17:10 — Jonas Wilms
– Jonas Wilms, Commented Mar 10, 2017 at 17:10
fair point jonas

Dan
– Dan

2017-03-10 17:13:41 +00:00
Commented Mar 10, 2017 at 17:13 — Dan
– Dan, Commented Mar 10, 2017 at 17:13

Jonas Wilms · Accepted Answer · 2017-03-10 17:19:32Z

2

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

edited Mar 10, 2017 at 17:19

answered Mar 10, 2017 at 17:14

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dan Over a year ago

hey jonas, thank you for taking time to help me. Im having trouble understanding this a bit. Would it be at all possible for you put it up on js fiddle? thanks buddy. really appreciate your help

Jonas Wilms Over a year ago

@Dan shure. added

Dan Over a year ago

Thanks for posting but I'm afraid I wasn't clear in my question at all (very sorry about that). I need to be able to make a sudoku board where I give each 3x3 a class. so i need a 3x3 of 3x3s. Please tell me if thats confusing and I will try to word it better lol

Jonas Wilms Over a year ago

@Dan why?? for checking+ calculating results its not neccessary.

Dan Over a year ago

its more for styling sake. my teacher is a pain and wants this done in a specific way. I agree that its stupid to do it this way. no to mention is would be far easier in jQuery lol. Ive edited my origional question to make it clearer what im after.

Collectives™ on Stack Overflow

making a sudoku table in javascript with DOM

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related