25x25 checker board javascript

checkerboard.js

/**
* Create 25x25 checker board and add hover and click listeners.
* Hovering should cross-hair column and row-wise boxes.
* Clicking should toggle box color to red.
* Clicking back space should reset colors to default.
* @author Bijan Vakili
*/
$( document ).ready( function() {

    var efficientContainer = '#result-efficient',
        wrapperDiv, wrapperDivContent = '';

    $( efficientContainer ).append( '<div class="box-wrapper" />' );

    wrapperDiv = $(efficientContainer).find( '> div' );

    for ( var i = 0; i < 25; i++ ) {

        rowClasses = 'box ' + ' row-' + i;

        for ( var j = 0; j < 25; j++ ) {

            columnClasses = ' ';

            if ( ( ( 25*i ) + j ) % 2 == 0) {

                columnClasses += 'box-alt ';

            }

            columnClasses += 'column-' + j;

            wrapperDivContent += '<div class="' + rowClasses + columnClasses + '"></div>';
        }
    }

    wrapperDiv.append( wrapperDivContent );

    boxHover = function() {

        column = $(this).attr('class').replace(/.*(column-[\d]+).*/,"$1");

        row = $(this).attr('class').replace(/.*(row-[\d]+).*/,"$1");

        hasClass = $(this).hasClass('highlight');

        $('.' + column + ', .' + row).toggleClass('highlight', !hasClass);
    }

    clickHandler = function() {

        hasClass = $(this).hasClass('highlight-locked');

        $(this).toggleClass('highlight-locked', !hasClass);

        console.log("this clicked");
    }

    keypressHandler = function(e) {
        if (e.keyCode == 8) { //Backspace
            $('.highlight-locked').toggleClass("highlight-locked", false);
        }
    }

    $( '.box' ).hover(boxHover, boxHover);

    $( '.box' ).click(clickHandler);

    $( document ).keypress(keypressHandler);
});