Форум

Tanya51 · #1 (**permalink**) 29.07.2017, 18:25

вот такая задача:
Напишите программу, которая позволяет выбирать отдельные ячейки в наборе(таблица): при клике на ячейку она красится в черный цвет, при повторном клике - в белый.

При клике на кнопку Clear вся область очищается.
При клике на кнопку Restore данные восстанавливаются.

Поле ячеек генерируется функцией, в которую передается количество ячеек по горизонтали и вертикали, а также элемент, в который ячейки будут нарисованы.

Мой код

function cat(rows, cols) {
    var $table = $('<table>').appendTo($('#content'));
    
    for (var i = 0; i < rows; i++) {
        var $tr = $('<tr>').appendTo($table);
        for (var j = 0; j < cols; j++) {
            var $td = $('<td>').appendTo($tr);
        }
    }
}
cat(10, 10);

$('td').on('click',function bgColor(){
		$(this).css('background', '#000');
	});


$('#clr').on('click',function(){
		$('td').css('background', 'none');
	});


$('rest').on('click',function(){
	
	});

Не могу понять как можно сделать кнопку Restore.
Подскажите пожалуйста

j0hnik · #2 (**permalink**) 29.07.2017, 18:39

Сохранить данные можно в замыкании, локал сторейдж или куки

Rise · #3 (**permalink**) 29.07.2017, 20:35

Сообщение от Tanya51

вся область очищается

Не понятно о какой области речь.

рони · #4 (**permalink**) 29.07.2017, 21:29

Tanya51,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td{
    width: 40px;
    height: 40px;
     border: 1px #0000FF solid;
  }
  table{
    border-collapse: collapse;
     border: 1px #0000FF solid;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    function cat(rows, cols, sel) {
        var table = $("<table>").appendTo(sel);
        var arr = new Array(rows * cols);
        var tr = $("<tr>");
        var td = $("<td>");
        arr = $.map(arr, function(el, i) {
            td.clone().appendTo(tr).click(function() {
                arr = rest[k].slice(0);
                arr[i] = !arr[i];
                rest.length = ++k;
                rest[k] = arr;
                setColor()
            });
            if (!((i + 1) % cols)) {
                tr.appendTo(table);
                tr = tr.clone().empty()
            }
            return false
        });
        return arr.slice(0)
    }
    var rest = [cat(5, 5, "#content")];
    var k = 0;

    function setColor() {
        $.each(rest[k], function(i, el) {
            $("td").eq(i).css("background-color",
                el ? "#FF00FF" : "")
        });
        $(".rest span").text("(" + k + ")")
    }
    $(".clr").on("click", function() {
        var ret = rest[k].some(function(a) {
            return a
        });
        if (!ret) return;
        rest[++k] = new Array(rest[k - 1].length);
        setColor()
    });
    $(".rest").on("click", function() {
        if (k > 0) {
            --k;
            setColor()
        }
    })
});
  </script>
</head>

<body>
<div id="content"></div>
<button class="clr">clr</button><button class="rest">rest<span>(0)</span></button>
</body>
</html>

j0hnik · #5 (**permalink**) 30.07.2017, 04:17

Рони, много буков

<html>
<head>
	<style>
		table{
			border-collapse: collapse;
		}
		td{
			width: 20px;
			height: 20px;
			border: 1px solid red;
		}
		.black{
			background-color: #000;
		}
	</style>
</head>
<body>
	<button id="clr">clr</button><button id="rest">rest</button>
	<script>
		((rows, cols, el) => document.querySelector(el).insertAdjacentHTML('beforeend', '<table>'+'<tr>'.concat('<td>'.repeat(cols)).repeat(rows)))(10, 10, 'body');
		var t; (res=()=>{
			var table = document.querySelector('table'), tds = table.querySelectorAll('td');
			tds.forEach(el => el.onclick = e => {
				el.classList.toggle("black");
				t = table.innerHTML;
			});
			document.querySelector('#clr').onclick = () => tds.forEach(el => el.className ='');
			document.querySelector('#rest').onclick = () => {
				table.innerHTML = t;
				res();
			};
		})();
	</script>
</body>
</html>
</body>
</html>

рони · #6 (**permalink**) 30.07.2017, 08:29

j0hnik,
JQuery где?

рони · #7 (**permalink**) 30.07.2017, 08:32

Сообщение от j0hnik

много буков

строка 36-37

j0hnik · #8 (**permalink**) 30.07.2017, 15:46

Сообщение от рони

j0hnik,
JQuery где?

<html>
<head>
	<style>
		table{
			border-collapse: collapse;
		}
		td{
			width: 20px;
			height: 20px;
			border: 1px solid red;
		}
		.black{
			background-color: #000;
		}
	</style>
</head>
<body>
	<button id="clr">clr</button><button id="rest">rest</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		((rows, cols, el) => $(el).append('<table>'+'<tr>'.concat('<td>'.repeat(cols)).repeat(rows)))(10, 10, 'body');
		var t; (res=()=>{
			var table = $('table'), tds = $('td');
			tds.click(function(){
				$(this).toggleClass("black");
				t = table.html();
			});
			$('#clr').click(()=> tds.removeClass("black"));
			$('#rest').click(() =>{
				table.html(t);
				res();
			});
		})();
	</script>
</body>
</html>

рони, если надо решить на jquery, но некоторая часть решения нативно будет короче и быстрей, что будете делать? короткий путь или не отступать от общего стиля?

рони · #9 (**permalink**) 30.07.2017, 16:36

Сообщение от j0hnik

короткий путь

Tanya51 · #10 (**permalink**) 01.08.2017, 18:50

Сообщение от j0hnik

короткий путь или не отступать от общего стиля?

А вы проверяли код в браузере? Он не работает. Клик не производится.

Форум

Справочник

Discord чат

Курсы javascript