Selecting an adjacent td in a table grid with jQuery

Question

I'm trying to make a simple numbers games using jQuery. I built a 7x7 grid using an html table. I created some jQuery functions to allow the user to highlight and un-highlight cells in the table. I would like to make it so that the first cell the user selects must be in the far left column, and then each subsequent cell selected must be adjacent to one that is highlighted, until they connect cells all the way to the right side of the table. The cells will have numbers in them and there will be some gamey functionality that I haven't set in stone yet.

With a simple boolean and some if-logic I established that the first cell must be from the left column, but now I'm having trouble making sure that each subsequent cell be one that is adjacent to a highlighted cell. I have given each td in the table a numbered id, from 1-49 (7 rows of 7). When a user selects a cell I capture that cell's id in an array called cellCoord. I was hoping that something like this might work:

var thisCell = parseInt($(this).attr('id'));
if  (thisCell == (cellCoord[i]+1) || thisCell == (cellCoord[i]-1) ||
     thisCell == (cellCoord[i]+7) || thisCell == (cellCoord[i]-7))

Unfortunately it doesn't. Any suggestions?

An early draft of my efforts can be found here.

`id`s may not start with a number in all versions of html prior to 5. You might consider using a `data-` attribute. Though I'm aware this doesn't answer the question. Figured I should point it out. — James Montagne, Feb 22 '13 at 21:38
Well, I numbered them though (, etc), and then parsed then used parseInt($(this).attr('id')). Does this not work the way that I'm thinking? — Andy, Feb 22 '13 at 21:42
Related to the question at hand. Is `i` the number of the previously selected cell? And, if these are ints already, what use is the array? This seems like it should work except for the edge cases, what is the result of this code? — James Montagne, Feb 22 '13 at 21:43
It works, it's just invalid html. Browsers tend to be as lenient as possible though, so it likely won't actually cause a problem in a modern browser. — James Montagne, Feb 22 '13 at 21:43
The `i` is from `for(i = 0; i < cellCoord.length; i++)`, which precedes the code in my post. As is, the code works somewhat, but there are cases where I can't seem to select a cell I figure I should, and same goes for de-selecting. — Andy, Feb 22 '13 at 21:54

Olaf Dietsche · Accepted Answer · 2013-02-22T23:31:19.023

1

Picking up the table from your website, I would change it a bit adding classes

<table>
    <tr class="row">
        <td class="square candidate"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
        <td class="square"></td>
    </tr>
    ...
</table>

CSS:

.square {
    width: 30px;
    height: 30px;
    border: white solid 1px;
    background-color: lightblue;
}

.highlighted {
    background-color: lime;
}

and then select adjacent squares

$('.square').click(function () {
    if ($(this).hasClass('candidate')) {
        $(this).addClass('highlighted');
        // select adjacent squares
        // horizontal
        $(this).prev('.square').addClass('candidate');
        $(this).next('.square').addClass('candidate');
        // vertical
        var i = $(this).index();
        $(this).parent('.row').prev('.row').children(':eq(' + i + ')').addClass('candidate');
        $(this).parent('.row').next('.row').children(':eq(' + i + ')').addClass('candidate');
    }
});

A square is a .candidate, if it is adjacent to an already .highlighted square.

edited Feb 22 '13 at 23:31

answered Feb 22 '13 at 22:14

Olaf Dietsche

72,253
8
102
198

This looks promising. Thanks for the suggestion. – Andy Feb 22 '13 at 22:21
This is definitely heading down the right direction. What I need to accomplish is to keep track of which cells are highlighted (rather than reset them each click) and create if-logic to restrict users to only be able to highlight cells that are adjacent to ones already lit. – Andy Feb 22 '13 at 22:47
@Andy Just remove the reset and add some class `highlighted` and check for that. – Olaf Dietsche Feb 22 '13 at 23:01
@Andy Please see updated answer, if you like you can add some CSS for candidates too. – Olaf Dietsche Feb 22 '13 at 23:33

score 0 · Answer 2 · answered Feb 22 '13 at 21:45

0

jQuery's .index() functionality can solve this for you. It can tell you which item is selected in a group of items.

http://api.jquery.com/index/

answered Feb 22 '13 at 21:45

Diodeus - James MacFarlane

112,730
33
157
176

Brad M · Answer 3 · 2013-02-22T21:52:22.943

Assign each cell an x and y coordinate. Also, add a class "selected" do any div that gets highlighted. For example.

<div data-x="1" data-y="1"><div data-x="2" data-y="1">
<div data-x="1" data-y="2"><div data-x="2" data-y="2">

Then something such as the following.

var div = $('#idOfDivJustClicked');
var x = div.data('x');
var y = div.data('y');

Then search for divs using jquery's attr selector that contain an x or y coordinate that are plus or minus one. This is not the exact logic, you would need to implement something similar.

if ($('div[data-x=' + (x+1) + '][data-y=' + y + ']').hasClass('selected'))
{
    // found an adjacent highlighted cell
    // execute code
}

Selecting an adjacent td in a table grid with jQuery

3 Answers3

Linked