Hello, Im trying to find the current cell that the user has clicked on. For example if the user clicked on the first cell, I want to return 1. If they clicked on the tenth cell I want to return 10. There are 16 total cells in the table.
<html>
<head>
<title>Lights Out!</title>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type= "text/javascript">
//The d
var gameBoard = new Array(getTdCount())
for(var i =0; i < getTdCount(); i++)
{
gameBoard[i] = 0;
}
function getTdCount()
{
return $("td").length;
}
$(document).ready(function()
{
$("#board tr td").hover(function()
{
$(this).css('border-color', '00FF33');
},
function()
{
$(this).css('border-color', 'black')
})
var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')
$('td').append($offProtoType)
$("#board tr td").click(function()
{
$("img", this).attr('src', 'on.png')
})
});
</script>
<style type="text/css">
td
{
border-style:solid;
border-color:black;
background-color:black;
float:left;
}
</style>
</head>
<body>
<img style = "display:none" id="offprototype" src ="off.png">
<img style = "display:none" id="onprototype" src ="on.png">
<table id="board" border="3" bgcolor="black" align="center">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" value="Shuffle" onclick="change()"/>
</body>
</html>