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?

Answer 1

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/

Answer 2

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

}

Answer 3

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/

Answer 4

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.

Answer 5

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/

Answer 6

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.