根据垂直和水平标题突出显示表格单元格

Question

我正在玩“足球方块”游戏，我想根据顶部和侧面标题突出显示获胜者的单元格。

现在，我知道它们并不是真正的标题，但它们具有相同的用途。

我的表位于此jfiddle： https ://jsfiddle.net/8ybtntqg/

我想做的是这样的：

假设获胜者是与TeamA-2和TeamZ-9在一起的牢房中的任何人。那就是Mitch。 我想强调米奇的牢房。 如何使用Javascript或Jquery做到这一点？ 如果我只想查找“ Mitch”一词，我知道该怎么做，但是我想根据TeamA和TeamZ的数量自动执行此操作。

到目前为止，我已经知道了这一点，但是当然，它仅突出显示名称，但这是我唯一知道的起点：

$('#table_id td').each(function() {
if ($(this).text() == 'Mitch') {
    $(this).closest('td').css('background-color', '#f00');
 }
});

Answer 1

您可以使用jQuery的filter（）方法获取列和行的索引。

这样可以直接访问单元格，如下所示：

$('tr').eq(row).find('td').eq(col).css('background-color', '#f00');

片段：

 function highlight(teamA, teamZ) { var col, row; col = $('#table_id td').filter(function() { //return column of teamA return $(this).html() === teamA.replace(' - ', '<br>'); }).index(); row = $('#table_id tr').filter(function() { ////return row of teamZ return $(this).html().indexOf(teamZ.replace(' - ', '<br>')) > -1; }).index(); $('tr').eq(row).find('td').eq(col).css('background-color', '#f00'); } highlight('TeamA - 2', 'TeamZ - 9'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" id="table_id"> <tr> <td>Squares</td> <td>TeamA<br>1</td> <td>TeamA<br>2</td> <td>TeamA<br>3</td> <td>TeamA<br>4</td> <td>TeamA<br>5</td> <td>TeamA<br>6</td> <td>TeamA<br>7</td> <td>TeamA<br>8</td> <td>TeamA<br>9</td> <td>TeamA<br>0</td> </tr> <tr> <td>TeamZ<br>3</td> <td bgcolor="#89ff89">Mark</td> <td bgcolor="#89ff89">John</td> </tr> <tr> <td>TeamZ<br>5</td> <td bgcolor="#89ff89">Mike</td> <td bgcolor="#89ff89">Earl</td> </tr> <tr> <td>TeamZ<br>8</td> <td bgcolor="#89ff89">Morris</td> <td bgcolor="#89ff89">Brice</td> </tr> <tr> <td>TeamZ<br>7</td> <td bgcolor="#89ff89">Taylor</td> <td bgcolor="#89ff89">Evan</td> </tr> <tr> <td>TeamZ<br>9</td> <td bgcolor="#89ff89">Mandy</td> <td bgcolor="#89ff89">Mitch</td> </tr> <tr> <td>TeamZ<br>2</td> <td bgcolor="#89ff89">Tony</td> <td bgcolor="#89ff89">Jennifer</td> </tr> <tr> <td>TeamZ<br>1</td> <td bgcolor="#89ff89">Kristen</td> <td bgcolor="#89ff89">Hector</td> </tr> <tr> <td>TeamZ<br>4</td> <td bgcolor="#89ff89">Gabby</td> <td bgcolor="#89ff89">David</td> </tr> <tr> <td>TeamZ<br>6</td> <td bgcolor="#89ff89">George</td> <td bgcolor="#89ff89">Steffanie</td> </tr> <tr> <td>TeamZ<br>0</td> <td bgcolor="#89ff89">Breck</td> <td bgcolor="#89ff89">Terry</td> </tr> </table> 

Answer 2

您可以遍历所有表元素以找到匹配的值，然后使用CSS选择器突出显示匹配的字段。 这样的事情会起作用：

winningAScore = 2;
winningZScore = 9;

//get top row
counter = 0;
$('#table_id tr:first-child td').each(function() {
    var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
  if(!isNaN(strOut) && strOut == winningAScore) {
        posnX = counter;
  }
  counter++;
})


//get first column row
counter = 0;
$('#table_id tr td:first-child').each(function() {
    var strOut = $(this).html().replace(/Team[A-z]<br>/g,'');
  if(!isNaN(strOut) && strOut == winningZScore) {
        posnY = counter;
  }
  counter++;
})

$('tr:eq('+posnY+') td:eq('+posnX+')').css('background-color', 'red');

您可以在此JS小提琴中看到它的工作原理： https : //jsfiddle.net/igor_9000/8ybtntqg/1/

Answer 3

您可以像这样在jQuery中执行基于索引的检测和选择： $('tr:eq(2) td:eq(1)').css('background-color', 'red');

示例： http ： //codepen.io/anon/pen/EPLNvB