2017-28-08_click/js/script.js

function grid(quantityRow, quantityColumn, place) {
	var $item = $('<table>').css({'margin' : 'auto', 'background' : '#fff', 'border-collapse' : 'collapse', 'border-spacing' : 0}).prependTo(place);

	for(i=0; i < quantityRow ; i++) {
		var $tr = $('<tr>').appendTo($item);

		for(j=0; j < quantityColumn ; j++) {
			$('<td>').css({'border' : '1px solid #000', 'height' : '30px', 'width' : '30px'}).addClass('white').appendTo($tr);
		}
	}
}

grid(6, 6, '.container');


var arr = [];

$('td').on('click', function(event) {

	if ( $(this).hasClass('white') ) {

 		$(this).css({'background' : '#000', 'height' : '30px', 'width' : '30px'}).removeClass('white').addClass('black');
		arr.push(this);

	}else if( $(this).hasClass('black') ) {

		$(this).css({'background' : '#fff', 'height' : '30px', 'width' : '30px'}).removeClass('black').addClass('white');
		arr.splice(arr.indexOf(this), 1)		
	}
});

$('#clear').on('click', function(){
	$('td').css({'background' : '', 'height' : '30px', 'width' : '30px'});
});


$('#restore').on('click', function(){
	$(arr).css({'background' : '#000', 'height' : '30px', 'width' : '30px'});
});