Highlight corresponding table <TD> cell based on row name and cell value

Question

How would I go about highlighting a cell based on the row name and column value from the first column? I have included a fiddle.

 $('tr').each(function() { var currentValue = $(this).find('th').text(); var currentValue2 = $(this).find('td').text(); if(('Value 1' == currentValue) && ('Value 1' == currentValue2)) { $(this).addClass('highlight'); } });

 .highlight { background: #FFFF00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th>test</th> <th>test2</th> </tr> <tr> <td>Value 1</td> <td>12</td> </tr> <tr> <td>Value 2</td> <td>0</td> </tr> </table>

http://jsfiddle.net/alsjka/entumojr/

Answer 1

that's a lot more complicated that what you wrote bro,

your algorithm is wrong for what you want you want this: if a heading has "One" text in it and the td has the same "One" text (or any desired text) you want to add highlight class to td

so your search should not begin from tr elements, but from th elements

and forEach th elements you need to traverse all tr elements looking for a td having the same(or any desired) text

i've changed your code a little and this is the result

$('th').each(function(index,item) {        
      var currentValue = $(item).text();      
      $('tr').each(function(index,item){
        var tdElements = $(item).find("td");
        tdElements.each( function(index,item){        
            var currentValue2 = $(item).text();                      
            if(('test' == currentValue) && ('Value 1' == currentValue2)) {  
                $(this).addClass('highlight');
                $(this).next().addClass('highlight2')
            }
        })
      })          
});

http://jsfiddle.net/mahdiar_mansouri/txo2jpmq/11/

=========

based on your new comment I think you want next element of the match to be selected so i've updated it a little, check out the fiddle for best result and see if it is what you wanted

===========

UPDATED

based on your last comment You want corresponding TH and first TD of a row

This snippet can help you do that

$('th').each(function(index,item) {        
  var currentValue = $(item).text();      
  $('tr').each(function(index2,item){
    var tdElements = $(item).find("td");
    if(tdElements.first().text() == "Value 2" && currentValue == 'test8' ){
        tdElements.eq(index).addClass('highlight');
    } 
  })          

});

Here's the fiddle of it

http://jsfiddle.net/mahdiar_mansouri/06ygpzqd/3/

Answer 2

I would like to contribute an answer to my OP. Thanks for all answers and suggestions..

http://jsfiddle.net/alsjka/81sy27d4/88/

--Css to highlight table cell
.highlight {
    background: green;
}
--find table header index by cell name using "TH"
var row = $("#tab").find("th:contains('tblh2')").closest('th').index();
--Find non header index by cell name using "TD"
var col = $("#tab").find("td:contains('tblh3')").closest('tr').index();
--Script to use the found indexes and highlight the cell 
$('table tr:eq(' + row + ') td:eq(' + col + ')').addClass('highlight');
--Sample table
    <table border="2" width="200" id="tab">

  <tr>
    <th></th>
    <th>tblh1</th>
    <th>tblh2</th>
    <th>tblh3</th>
  </tr>
  <tr>
    <td>tblh1</td>
    <td>3</td>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td><span>tblh2</span></td>
    <td>4</td>
    <td>6</td>
    <td>2</td>
  </tr>
  <tr>
    <td>tblh3</td>
    <td>5</td>
    <td>2</td>
    <td>4</td>
  </tr>
</table>