Home/ Questions/Q 580917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T14:31:26+00:00

Im trying to find the current cell that the user has clicked on. For

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0