Dynamically highlight td in a table

user_9455734 0
Viewed 571

Problem

How to highlight dynamically a selected td?

Codepen

Pen here

Code

The map is a 2d array random generated, something like this:

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

I can move the player 3 squares per turn and, one of this squares is his actual position. I used this function to call the movement: 

function movements(character){
    var possibleMovement=3;
    let coord=character.actualPosition; 
        let row = $($("#tableGame tr")[coord.row]);
        let cell = $($("td", row)[coord.cell]);

    forward(row, cell, possibleMovement, character);
    backward(row, cell, possibleMovement, character);
    goUp(row, cell, possibleMovement, character);
    goDown(row, cell, possibleMovement, character);
};

and with the functions below I try to highlight the cells where the character can actually move. 

function forward(row, cell,possibleMovements, character){
    for(var i = 0; i<possibleMovements; i++){
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
    };
};

function backward(row, cell, possibleMovements, character){
    for(var i = 0; i>=possibleMovements; i--){
        console.log('sei qua');
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
    };
};

Task

I need to highlight the tiles near the character:

  • Two tiles above character.actualPosition

  • Two tiles below

  • Two tiles at his right

  • Two tiles at his left

    testImage

These are the two " testing function " 

function forward(row, cell,possibleMovements, character){
    for(var i = 0 ; i<possibleMovements; i++){
        cell = $($("td", row)[coord.cell +i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
        console.log([coord.row] + "<<<row" + [coord.cell+i] + "<<<cell");
    };
};

function backward(row, cell, possibleMovements, character){

    possibleMovements= possibleMovements*-1;

    for(var i = 0 ; i>possibleMovements; i--){
        cell = $($("td", row)[coord.cell+i]);
        var tile = $(".tile", cell).addClass('possibleSteps');
        console.log([coord.row] + "<<<row" + [coord.cell-i] + " <<<cell");
    };
};
html-table jquery javascript
1 Answers

Finally i found an answer. I want to say thanks to this post because it helps me a lot to find a solution that works.

The final functions to highlight the tiles near the character are these 

function movements(){
    let possibleMovement=3;
    let row = character.actualPosition.row;
    let cell = character.actualPosition.cell;
    forward(possibleMovement, row, cell);
    backward(possibleMovement, row, cell);
    goUp(possibleMovement, row, cell);
    goDown(possibleMovement, row, cell);

};

function forward(possibleMovements, row, cell){

    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = 0; i<possibleMovements; i++){
        let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function backward(possibleMovements, row, cell){
    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i>(possibleMovements*-1); i--){
        let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function goUp(possibleMovements, row, cell){
   let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i>(possibleMovements*-1); i--){
        let cell = table.rows[charRow+i].cells[charCell]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

function goDown(possibleMovements, row, cell){
    let charRow = row;
    let charCell= cell;
    var table = $("table")[0];

    for(var i = -1; i<possibleMovements; i++){
        let cell = table.rows[charRow+i].cells[charCell]; // This is a DOM "TD" element
        let $cell = $(cell);
        $(cell).addClass('possibleSteps');
    };
};

The main solution was to understand this 4 lines of code, and how i can iterate through them: 

    var table = $("table")[0];
    let cell = table.rows[charRow].cells[charCell+i]; // This is a DOM "TD" element
    let $cell = $(cell);
    $(cell).addClass('possibleSteps');
user_94557340
Related