Finding the position of current td cell when click on
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>
Use index:
var $tds = $('#board tr td');
$tds.click(function(){
// Gets the 0 based index, and add 1:
var num = $tds.index(this) + 1;
$("img", this).attr('src', 'on.png')
});
We first cache the results for the #board tr td search, so we don't have to look it up on each click.
Next, we get use the index function to find the index of the current td out of the full result of td elements.
Last, we add 1 since index returns a 0 based count.
Update: jQuery 1.4
This is not an instance were we can use the new index() feature of jQuery 1.4. index() without parameters, gets the index of the element from the context of its siblings. In this case, we need it in the context of all the td elements in the table, not just its siblings.
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
Like this:
var cells = $('#board td')
cells.click(function() { alert(cells.index(this) + 1); });
The cellIndex property can be used.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82915075
Be aware: There is a bug in Safari 2 and Konqueror where cellIndex is always 0. In that case, a feature test and a fallback can be used.
加载中,请稍侯......
精彩评论