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>