Changing adjacent cells in table when an event is triggered in JQuery

Question

I'm trying to make a game of lights out. I can get the lights to toggle on and off when i click them, but i am having trouble thinking up logic to make the adjacent one come one as well. For example if i click an edge of the table, I should see the three lights adjacent to the light i clicked, become lit. I'm thinking maybe it has something to do with the "this" bound in my click method, Maybe the "this" is only referencing the one i clicked on and not the adjacent ones. I need to know, perhaps how to get it to reference the adjacent ones?

 <html>
    <head>
        <title>Lights Out!</title>
        <script type="text/javascript" src="jquery-1.4.js"></script>

        <script type= "text/javascript">

        var gameBoard = new Array(getTdCount())




        function lightStatus(position)
        {
            //if light is on
            if(gameBoard[position] ==true)
            {
                //set the original status back to false
                gameBoard[position] = false;
                return false                
            }

            //turn on light
            gameBoard[position]=true;
            return gameBoard[position]
        }



        function getTdCount()
        {
            return $("td").length;
        }

        function getTrCount()
        {
            return $("tr").length;
        }


        function switchLights( obj, num )
        {
            if(lightStatus(num))
                {

                    $("img", obj).attr('src', 'on.png')
                }
                else
                {
                    $("img", obj).attr('src', 'off.png')
                }



        }


        $(document).ready(function()
        {

            $("#board tr td").hover(function()
            {
                $(this).css('border-color', '00FFCC');
            },
            function()
            {
                $(this).css('border-color', 'black')
            })

            var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')     
            $('td').append($offProtoType)

            $tds = $('#board tr td');
            $tds.click(function()
            {
                var num = $tds.index(this) + 1; 


                    switchLights(this, num)

            })

        });


        </script>

        <style type="text/css">
        td
        {
            border-style:solid;
            border-color:black;
            background-color:black;
            float:left;
        }

        body
        {
            background-color: grey;
            color: green;
        }


        </style>


        </head>
        <body>

        <img style = "display:none" id="offprototype"  src ="off.png">
        <img style = "display:none" id="onprototype"  src ="on.png">

        <h1 align="center">Lights Out<h1>

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

score 0 · Answer 1 · answered Feb 03 '10 at 03:32

Probably the easiest thing to do is take a look at http://jqueryminute.com/finding-immediately-adjacent-siblings/ if you want just the siblings. If you want the whole row then you can use parent to select the parent element of the cell which should be the row.

score 0 · Accepted Answer · answered Feb 03 '10 at 03:46

Use $(this).next() and $(this).prev() to get a reference to the next & previous.

You can use $(this).index() to obtain the position of the 'this' among its siblings; so use something like the following for abobe and below.

var pos = $(this).index();
var prevRow = $(this).parent().prev('tr');
var above = prevRow && prevRow.children().slice(pos);
var nextRow = $(this).parent().next('tr');
var below = prevRow && prevRow.children().slice(pos);

Changing adjacent cells in table when an event is triggered in JQuery

2 Answers2

Linked