Most efficient way of creating a grid in HTML with CSS?

So my problem is this, I need to create a grid that in each cell there should be a 0 or a 1. These cells when clicked should toggle between 0 and 1. When hovered It should show the coordinates (ex: 1,5). Now the only way I got this to work was by creating three divs. One for the cell (which contains the number), one for the coordinates (this one is added dynamically) and another div (wrapper) that will on top of the other two and this one will have the event listeners. So basically I'm creating three divs for cell, now this work perfectly if its for a 10x10 grid, but when It gets to a more large (64x64) the browser starts to freeze.

This is how the HTML looks for a cell of the grid:

0

I created a working fiddle please take a look:

http://jsfiddle.net/vicgonzalez25/Tfs2M/

The problem: Once the grid start getting to a bigger size (ex: 64x64) by creating these three divs the browser starts to freeze.

My question is: is there a more efficient way of doing this grid ? Maybe using a table ? Thanks

In order to reproduce:

HTML:

    
        Aperture Configuration:
        Grid Size:
        
        x
        
    
    

    
        Auto Correlation:
    
    

Javascript:

```
(function(GRASP, $){
var GRID_ROWS,
GRID_COLS,
GRID_ELEMENT,
MATRIX_ROWS,
MATRIX_COLS,
MATRIXHEADER_ELEMENT,
MATRIX_ELEMENT,
A,C;

GRASP.config = {
gridContainer: "grid",
matrixContainer: "matrix",
matrixHeader: "matrixHeader"
};

GRASP.start = function(){
GRID_ROWS = $("#rows").val();
GRID_COLS = $("#cols").val();
MATRIX_ROWS = GRID_ROWS * 2 - 1;
MATRIX_COLS = GRID_COLS * 2 - 1;
createGrid();
createAutocorrelationMatrix();
};

function createGrid()
{
GRID_ELEMENT = $("#"+GRASP.config.gridContainer);
GRID_ELEMENT.html(""); // Clear Grid ;)
var coord;
var cell; // Contains the 1 or 0 base

Most interesting, a few pointers with 64 by 64 in mind.

-
.appendTo("#"+GRASP.config.gridContainer)

-
Except, every time you add an element, the browser rejiggles everything, which takes a surprising amount of calculations.. I would create a new div from scratch , attach all the elements under it and then add it to the document. This should speed up things tremendously.

-
I love how you actually already have that jQuery result cached ;)
GRID_ELEMENT = $("#"+GRASP.config.gridContainer);

Not related to speed, but

-
I would rather go for $MATRIXHEADER then MATRIXHEADER_ELEMENT

-
There is a bit of copy pastage going on between createAutocorrelationMatrix and createGrid (the createElement part), you should resolve that into a common helper function

-
This:

function cellClick(){
    var cell = $(this).next();

    if(cell.text() == "0"){
        cell.text("1");
    } else {
        cell.text("0");
    }
}

could be

function cellClick(){
    var cell = $(this).next();
    cell.text( cell.text() == '0' ? '1' : '0');
}

All in all, very readable code, I would not mind maintaining this.

StackExchange Code Review Q#48792, answer score: 5