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 = [];
var nwarr = [];

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

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

 		$(this).removeClass('white').addClass('black');
		arr.push(this);

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

		$(this).removeClass('black').addClass('white');
		arr.splice(arr.indexOf(this), 1)		
	}
});

$('#clear').on('click', function(){
	for (i=0, j=0; i< arr.length; i++) {
		if ($(arr[i]).hasClass('black') ) {
			nwarr[j] = arr[i];
			j++;
		}
	}
	$(nwarr).removeClass('black').addClass('white');
});


$('#restore').on('click', function(){

	$(nwarr).removeClass('white').addClass('black');
	nwarr =[];
});