• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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/

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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/

about 3 years ago · Juan Pablo Isaza Report

0

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>
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error