LoolGram,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#table table {
overflow:hidden;
border:1px solid #FFDAB9;
background:#fefefe;
width:70%;
margin:5% auto 0;
border-radius:5px;
}
#table table th, td {
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
text-align:center;
}
#table th {
// padding-top:22px;
text-shadow: 1px 1px 1px #fff;
background:#e8eaeb;
}
#table td {
border: 3px solid #e0e0e0;
}
#table td.act {
background: red;
color: white;
}
#table td.act2 {
background: green;
color: #000;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>Аа</td>
<td>Бб</td>
<td>Yy</td>
<td>Гг</td>
<td>Дд</td>
<td>Hh</td>
</tr>
<tr>
<td>Оо</td>
<td>Gg</td>
<td>Пп</td>
<td>Рр</td>
<td>Сс</td>
<td>Тт</td>
</tr>
</table>
<script>
function myFunc(e) {
var evt = window.event || e,
obj = evt.srcElement || evt.target;
if (obj.tagName && obj.tagName == "TD") {
var letter = /[a-z]/i.test(obj.innerHTML);
obj.classList.toggle(letter ? "act2" : "act")
}
var ok = document.querySelectorAll(".act2").length == 3 && !document.querySelectorAll(".act").length;
ok && alert("great victory")
}
onload = function() {
var trg = document.getElementById("table");
if (document.addEventListener) trg.addEventListener("click", myFunc);
else if (document.attachEvent) trg.attachEvent("onclick", myFunc);
else trg.onclick = myFunc
};
</script>
</body>
</html>