动态突出显示表格中的单元格（td）

Question

问题

如何动态地突出显示所选的 td？

Codepen

这里是代码示例

代码

该地图是一个随机生成的二维数组，类似于以下内容：

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

以下是我尝试突出显示角色实际可以移动的单元格的功能。

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

任务

我需要突出显示靠近角色的瓷砖：

• 角色实际位置上方的两个瓷砖

• 下方的两个瓷砖

• 右侧的两个瓷砖

• 左侧的两个瓷砖

  

这是两个“测试函数”

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

- Legeo

---

我真的很喜欢你在这里所做的。对于我来说，很难判断你是如何实现那个移动逻辑的，但我想知道如果你在boardGame表格单元格中添加data-*属性（更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*），例如`data-x-pos`和`data-y-pos`，那么通过jQuery选择器遍历和选择单元格将会更加容易，例如 $("td[data-x-pos=4][data-y-pos=3]")。只是一个建议，祝你工作顺利。 - Jacek Rosłan

感谢您的评论，我认为我离解决方案又近了一步，多亏了这篇文章：链接，我会尽快更新。现在我正在处理随机生成的带有阴影边框的瓷砖的错误。 - Legeo

Answer 1

终于找到了答案。我想要感谢这篇帖子，因为它帮助我很多，让我找到了一个可行的解决方案。

最终用来突出显示角色附近瓦片的函数如下：

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

- Legeo