leon2009sp,
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.old{
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
text-align: center;
background-image: url(http://sincorrer.xyz/image/xb.png);
}
.new.old{
background-image: url(http://sincorrer.xyz/image/x.png);
}
</style>
</head>
<body>
<table width="200" summary="">
<tbody>
<tr>
<td class="old" id="1" value="1">1</td>
<td class="old" id="2" value="2">2</td>
<td class="old" id="3" value="3">3</td>
</tr>
<tr>
<td class="old" id="4" value="4">4</td>
<td class="old" id="5" value="5">5</td>
<td class="old" id="6" value="6">6</td>
</tr>
<tr>
<td id="4">----------</td>
<td id="5">------------</td>
<td id="6">---------</td>
</tr>
</tbody>
</table>
<div class="show">Выбор за Вами!</div>
<script>
window.addEventListener('DOMContentLoaded', function()
{
[].forEach.call(document.querySelectorAll('.old'), function(item)
{
item.addEventListener('click', function()
{ if(document.querySelectorAll('.new').length > 2 && !item.classList.contains('new')) {alert('больше 3 нельзя, уберите одно из 3 для нового выбора');return} ;
item.classList.toggle('new');
var res = [].map.call(document.querySelectorAll('.new'),
function(el) {
return el.id
})
document.querySelector('.show').innerHTML = res.length ? 'Выбрано: '+ res.length +' номера/ов ' + res : 'Выбор за Вами!'
});
});
});
</script>
</body>
</html>