plug-ugly,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 40px;
border: #800080 1px solid;
width: 40px;
text-align: center;
line-height: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var td = $("td");
var firstPlayer = "X";
var secondPlayer = "O";
var text = [secondPlayer, firstPlayer];
td.each(function(indx, el) {
el = $(el);
el.mouseenter(function() {
el.css("backgroundColor", "#87CEEB")
}).mouseleave(function() {
el.css("backgroundColor", "#FFFFFF")
}).click(function() {
var txt = text.reverse()[0];
el.css("backgroundColor", "#FFFFFF").text(txt);
var win = checkWin(indx, txt);
if (win) {
td.off();
alert("WIN " + txt + " !!!")
} else el.off()
})
});
function checkWin(indx, txt) {
var winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
return winningCombinations.some(function(el) {
return el.indexOf(indx) !== -1 && td.eq(el[0]).text() == txt && td.eq(el[1]).text() == txt && td.eq(el[2]).text() == txt
})
};
});
</script>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>