CODEWITHSUNDEEP
javascriptjquery
tomtom
tomtom

Reputation: 1190

Use jQuery to create NxN grid on screen

I've been searching for this and while I've come across a few similar answers, most of those seem related to HTML5. I'm searching for a jQuery solution to create an NxN grid consisting of empty <div>s.

This is what I've put together, but I believe the error is in attempting to display the 2D array on the page. Ideally I'd like to have an X x Y grid in an array called grid, whose elements I can eventually work with later. However this approach is giving me a bit of difficulty - what am I doing wrong? (Note I used 'X' for example purposes here)

function draw_board(x,y){
    var grid=[];
    for (var j=0;j<x;j++){
        for(var i=0;i<y;i++){
            grid[j][i]='<div>X</div>'
        }
    }
    $('body').append(grid);
}

Edit: The specific error I see in the console is Uncaught TypeError: Cannot set property '0' of undefined right at the grid[j][i]='<div>X</div>' line.

Answer:

In case anyone else stumbles upon this in the future, there are 3 good answers below.

  1. In order to show the 2D array properly, use $('body').append(grid.join('')); rather than $('body').append(grid);
  2. In order to avoid the actual error I was seeing, be sure to initialize the first item in the 2D array before attempting to assign a value to item [0][1]. (i.e.: do grid[j]=[]; before calling grid[j][i]=[];
  3. The accepted answer gives an immediate solution to the problem of creating an NxN grid using only jQuery, including the accompanying CSS.

Upvotes: 1

Views: 1616

Answers (3)

Timeout
Timeout

Reputation: 7909

I realize this is a slight variation on what you're trying to do but think you may find it useful in this case.

You can use a float left for each div in the row followed by a div with style="clear:both" to begin a new row.

Here is the code in action in a JSFiddle

.box {
    float:left;
    width:100px;
    height:100px;
    margin-right:5px;
    margin-bottom:5px;
    background-color:#0000FF;
}

var $container = $("<div></div>").css("float","left");

for(var i = 0; i < 3; i++) {
    for (var j = 0; j < 4; j++){
        $("<div></div>").addClass("box").appendTo($container);
    }
    $("<div></div>").css("clear", "both").appendTo($container);
}

$container.appendTo($("body"));

Upvotes: 2

Edward
Edward

Reputation: 1914

It is because grid is a one dimension array. When it tries to access grid[0][i] it gives error because grid[0] is empty, instead of an array.

Try this:

function draw_board(x,y){
    var grid=[];
    for (var j=0;j<x;j++){
        grid[j] = [];
        for(var i=0;i<y;i++){
            grid[j][i]='<div>X</div>'
        }
    }
    $('body').append(grid);
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You need to use join for the grid:

$('body').append(grid.join(''));

Alternatively, you can use an empty object instead of an array:

function draw_board(x,y){
    var grid = $();
    for (var j=0;j<x;j++){
        for(var i=0;i<y;i++){
            grid.add('<div>X</div>');
        }
    }
    $('body').append(grid);
}

Upvotes: 1

Related Questions