根據垂直和水平標題突出顯示表格單元格

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