Question

我有一个＆＃34;足球广场＆＃34;游戏开始了，我想基于顶部和侧面标题突出显示获胜者的细胞。

现在，我知道他们并不是真正的标题，但他们的目的是相同的。

我的桌子位于这个jfiddle：https://jsfiddle.net/8ybtntqg/

我想做的是：

让我们说获胜者将是与TeamA - 2和TeamZ - 9排队的小组中的任何人。那将是Mitch。我想强调米奇的细胞。我如何使用Javascript或Jquery执行此操作？我知道如果我只是在寻找＆＃34; Mitch＆＃34;这个词怎么做，但我想根据TeamA和TeamZ的数量自动完成。

到目前为止我有这个，但当然只会突出显示名称，但它是我知道的唯一开始的地方：

#Calculate 3 monthtly average volume (does not work, coding issue)

calculate_3month_average_volume <- function(stock, number_of_days){

return(SMA(stock, number_of_days)) 
}



avg_volume_matrix <- apply(X = volume_matrix, MARGIN = 2, FUN =    calculate_3month_average_volume(volume_matrix,90))

Answer 1

您可以使用jQuery＆＃39; filter()方法获取列和行的索引。

这样就可以直接访问单元格了：

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

<强>段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: