javascript - 在表格中动态突出显示 td

Question

问题

如何动态高亮选中的td？

代码笔

Pen here

代码

map 是一个随机生成的二维数组，像这样:

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

我每回合可以将玩家移动 3 个方格，其中一个方格就是他的实际位置。我用这个函数来调用运动:

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);
};

使用下面的函数，我尝试突出显示 Angular 色实际可以移动的单元格。

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');
    };
};

任务

我需要突出显示 Angular 色附近的方 block :

• character.actualPosition

  上方的两个图 block

• 下方两 block 瓷砖

• 他右边的两 block 牌

• 他左边的两张牌

  

这是两个“测试函数”

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");
    };
};

Answer 1

终于找到答案了。我想说谢谢 to this post 因为它对我找到有效的解决方案有很大帮助。

最后突出显示 Angular 色附近方 block 的函数是这些

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');
    };
};

主要的解决方案是理解这 4 行代码，以及我如何遍历它们:

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