Chess Table Generator

by Trifan Alexandru

CSS

#chessTable {
    width: 180px;
    height: 180px;
}

#chessTable .rowChess:nth-child(n) .colChess:nth-child(n).active {
    background-color: red;
}
#chessTable .rowChess:nth-child(n) .colChess:nth-child(n):hover {
    background-color: #ebe;
}

#chessTable .rowChess:nth-child(2n) .colChess:nth-child(2n+1){
    background-color: #000;  
}

#chessTable .rowChess:nth-child(2n+1) .colChess:nth-child(2n) {
     background-color: #000;   
}

JavaScript

function ChessTable() {
    
}

ChessTable.prototype.generateTable = function () {
    var _chessTable = $('<table></table>'),
        len = 8;
    
    _chessTable.attr('id', 'chessTable');
    _chessTable.attr('border', '1');
    
    for(var row = 0; row < len; row++) {
        var _rowCell = $('<tr></tr>');
        _rowCell.addClass('rowChess');
        for(var col = 0; col < len; col++) {
            var _colCell = $('<td></td>');
            _colCell.addClass('colChess');
            _colCell.on('mousedown', this.beginClick.bind(this));
            _colCell.on('mouseup', this.endClick.bind(this));
            
            _rowCell.append(_colCell);        
        }
        
        _chessTable.append(_rowCell);
        
    }
        
    $('body').append(_chessTable);
    
};

ChessTable.prototype.beginClick = function (event) {
    var _cell = $(event.target);
    _cell.addClass('active');
};

ChessTable.prototype.endClick = function (event) {
    var _cell = $(event.target);
    _cell.removeClass('active');
}

var _instance = new ChessTable();

_instance.generateTable();