CODEWITHSUNDEEP
javascriptjquery
Steffan
Steffan

Reputation: 15

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>

Upvotes: 1

Views: 3040

Answers (3)

Garrett
Garrett

Reputation: 3023

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.

Upvotes: 0

Doug Neiner
Doug Neiner

Reputation: 66201

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.

Upvotes: 3

SLaks
SLaks

Reputation: 887837

Like this:

var cells = $('#board td')
cells.click(function() { alert(cells.index(this) + 1); });

Upvotes: 0

Related Questions