script.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. function grid(quantityRow, quantityColumn, place) {
  2. var $item = $('<table>').css({'margin' : 'auto', 'background' : '#fff', 'border-collapse' : 'collapse', 'border-spacing' : 0}).prependTo(place);
  3. for(i=0; i < quantityRow ; i++) {
  4. var $tr = $('<tr>').appendTo($item);
  5. for(j=0; j < quantityColumn ; j++) {
  6. $('<td>').css({'border' : '1px solid #000', 'height' : '30px', 'width' : '30px'}).addClass('white').appendTo($tr);
  7. }
  8. }
  9. }
  10. grid(6, 6, '.container');
  11. var arr = [];
  12. $('td').on('click', function(event) {
  13. if ( $(this).hasClass('white') ) {
  14. $(this).css({'background' : '#000', 'height' : '30px', 'width' : '30px'}).removeClass('white').addClass('black');
  15. arr.push(this);
  16. }else if( $(this).hasClass('black') ) {
  17. $(this).css({'background' : '#fff', 'height' : '30px', 'width' : '30px'}).removeClass('black').addClass('white');
  18. arr.splice(arr.indexOf(this), 1)
  19. }
  20. });
  21. $('#clear').on('click', function(){
  22. $('td').css({'background' : '', 'height' : '30px', 'width' : '30px'});
  23. });
  24. $('#restore').on('click', function(){
  25. $(arr).css({'background' : '#000', 'height' : '30px', 'width' : '30px'});
  26. });