Highlight table cell based on vertical and horizontal headers

Question

I have a "football squares" game going, and I would like to highlight cells of the winners based on the top and side headers.

Now, I know they're not really headers but they serve the same purpose.

My table is located at this jfiddle: https://jsfiddle.net/8ybtntqg/

What I want to do is this:

Let's say the winner would be whoever is in the cell that lines up with TeamA - 2 and TeamZ - 9. That would be Mitch. I want to highlight Mitch's cell. How would I do this with Javascript or Jquery? I know how to do it if I was just looking for the word "Mitch", but I want to automatically do it, based on the numbers of TeamA and TeamZ.

I have this so far, but of course that only highlights the name but it's the only place I knew to start:

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

Answer 1

You can get the index of the column and row using jQuery's filter() method.

That will give you direct access to the cell like so:

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

Snippet:

 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

You can iterate over all the table elements to find the matching values, then use CSS selectors to highlight the matched field. Something like this will work:

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

You can see it working in this JS Fiddle: https://jsfiddle.net/igor_9000/8ybtntqg/1/

Answer 3

You can do index based detect and selection in jQuery like so: $('tr:eq(2) td:eq(1)').css('background-color', 'red');

Example: http://codepen.io/anon/pen/EPLNvB