javascript - 在表格中动态突出显示 td
问题描述
问题
如何动态突出显示选定的 td?
密码笔
代码
该地图是一个随机生成的二维数组,如下所示:
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");
};
};
解决方案
最后我找到了答案。我想对这篇文章表示感谢,因为它对我找到有效的解决方案有很大帮助。
突出显示角色附近的瓷砖的最终功能是这些
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');
推荐阅读
- javascript - 如果第二个项目的 package.json 不在项目的根目录中,如何在 package.json 中添加 github 依赖项
- python - 如何将自定义张量流模型与 CV2 DNN 模块一起使用?
- jsp - 在jsp中包含jsp,单击jsp中的按钮时如何删除包含jsp?
- c++ - QImage:加载图像时自动检测格式
- python - 如何使用 Flask 会话在 Twilio 中分离应用程序用户之间的会话?
- arrays - laravel ->get() 没有正确返回关系
- python - tf.train.shuffle_batch_join 和 tf.train.shuffle_batch 的区别
- python - 如何在 Flask 上使用 Authlib 2.0 获取身份验证代码/令牌?
- php - 如何 preg_match() 字符串并将所有结果输出到数组中?
- css - 无法在 Angular2+ 中正确显示引导轮播