Рони, много буков
<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>