JQuery При клике на кнопку Restore данные восстанавливаются
вот такая задача:
Напишите программу, которая позволяет выбирать отдельные ячейки в наборе(таблица): при клике на ячейку она красится в черный цвет, при повторном клике - в белый. При клике на кнопку 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. Подскажите пожалуйста |
Сохранить данные можно в замыкании, локал сторейдж или куки
|
отмена кликов в таблице
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>
|
Рони, много буков :)
<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>
|
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, но некоторая часть решения нативно будет короче и быстрей, что будете делать? короткий путь или не отступать от общего стиля? |
Цитата:
|
Цитата:
|
Tanya51,
=> стрелочные функции и repeat, не всех браузерах работают. смотрите в Google Chrome или Mozilla Firefox или пример пост №4. |
| Часовой пояс GMT +3, время: 11:14. |