How to get all classes of squares around

Question

I have a table and it looks like this:

| 1.1 | 1.2 | 1.3 |
___________________
| 2.1 | 2.2 | 2.3 |
___________________
| 3.1 | 3.2 | 3.3 |

And for example if I click on 2.2 what's the best way to get all squares around?

Please post the code you have so far, then we can help you with the next steps. — Broxzier, May 27 '13 at 12:30

score 2 · Accepted Answer · answered May 27 '13 at 13:48

Read the cellIndex property of the clicked cell and rowIndex of its parent TR node. This gives you coordinates of the cell:

coords = function(td) {
    return [td.cellIndex, td.parentNode.rowIndex];
}

Create an array of adjacent rows and columns:

    var adj = [
        [x - 1, y - 1],
        [x - 0, y - 1],
        [x + 1, y - 1],

        [x + 1, y - 0],
        [x - 1, y - 0],

        [x - 1, y + 1],
        [x - 0, y + 1],
        [x + 1, y + 1]
    ];

Iterate over all cells in the table and mark cells whose coordinates are in the array:

    var tds = game.getElementsByTagName("TD");
    [].forEach.call(tds, function(td) {
        if(contains(adj, coords(td)))
            td.className = "hot";
        else
            td.className = "";
    });

Complete working example: http://jsfiddle.net/FByXq/

score 1 · Answer 2 · answered May 27 '13 at 12:37

This could be done if the id/name/someSelector of each cell is logically ordered by row/column such as a1, a2.

Create a function that grabs the next/previous column and and next/previous row. This isn't tested, but the concept should work.

function grabSurroundingBoxes(origElementId){
    var id = origElementId;
    var row = id[0];
    var col = parseInt(id[1]);

    var nextRow = String.fromCharCode(col.charCodeAt(0) + 1);
    var nextCol = col + 1;

    // grab the next element based on the concat of nextRow + nextCol.toString()

}

Ishank · Answer 3 · 2013-05-28T06:36:51.630

Editing for the sake of completeness of my answer, -

Markup-

<table id="" border=1 cellspacing=0>
    <tr><td id="0-0">M</td><td id="0-1">M</td><td id="0-2">M</td></tr>
    <tr><td id="1-0">M</td><td id="1-1">M</td><td id="1-2">M</td></tr>
    <tr><td id="2-0">M</td><td id="2-1">M</td><td id="2-2">M</td></tr>

</table>

jQuery Script-

    $(function () {
        $("td").on("mouseover", function (event) {

        $("td").css("background","");
        var selectedBox = this.id;

        var selectedBoxRow = parseInt(selectedBox.split("-")[0]);
        var selectedBoxColumn = parseInt(selectedBox.split("-")[1]);

        var arrayOfNeighBours = [];

        for (var row = -1; row <= 1; row++) {
            for (var column = -1; column <= 1; column++) {
                var aNeighbour = ((selectedBoxRow + row) + "-" + (selectedBoxColumn + column));
                if (aNeighbour != selectedBox) {

                    $("#"+aNeighbour).css("background","blue");
                    arrayOfNeighBours.push(aNeighbour);
                }
            }
        }

    });
});

arrayOfNeighBours will have all the touching boxes.

jsfiddle.net/vkxbQ This is my code so far. I just want to get all with those stuff. — Ivanka Todorova, May 27 '13 at 13:09

Gustavo S. Rodrigues · Answer 4 · 2013-05-27T12:46:40.067

1

You can assign a class in all cells around the clicked, just denying the cell clicked.

$('td').on('click', function(){
    $(this).css('background', '#fff'); //reset
    $('td').not(this).css('background', '#ff9900'); //Adds background color in all cells except the cell clicked
});

http://jsfiddle.net/gusatvo_beavis/mT7zn/

edited May 27 '13 at 12:46

answered May 27 '13 at 12:40

Gustavo S. Rodrigues

189
10

That's awesome, but I want to check only the eight left squares. – Ivanka Todorova May 27 '13 at 12:47

Gustavo S. Rodrigues · Answer 5 · 2013-05-28T11:43:17.477

This should solve your problem!

I was having trouble getting the correct index with the selector, but I decided calculate the current index with parent * row size

$('td').on('click', function(){
    $('td').css('background', ''); //reset
    var index = $(this).index() + ($(this).parent().index() * 3); //curent index
    for(var x = 0, y = index; y--; x++){
        $('td').eq(x).css('background', '#ff9900');
    }
});

http://jsfiddle.net/mT7zn/2/

score 0 · Answer 6 · answered May 27 '13 at 12:37

You should somehow "mark" the coordinates in your table, so that each cell knows its coordinates. One possible solution includes (data-)attributes. In your code, you should check for the extremes: 1) In line 1, there is no line above 2) In line 3, there is no line below 4) Left from 1.1, 2.1, 3.1 are no elems 5) Rigth from 1.3, 2.3 3.3 are no elems.

Once you hvae this cornerstones, it would be easy to write a generic function.

How to get all classes of squares around

6 Answers6