I am theming some report tables and do not have access to the templates.

I have this code so far which ends up adding "my-class" to every TR element in the report table. However, I only want to add the class to the table row TR where the text was found. I am thinking I need a little more code to do this. Here are a few things I have tried so far:

if ($('#report-area table tr:contains("Name")', this).length > 0) {
$("#reportArea table tr", this).addClass("my-class");
}

I have also tried:

if ($('#report-area table tr:contains("Name")', this).length > 0) {
$(this).addClass("my-class");
}

... but that did not work either.

I am theming some report tables and do not have access to the templates.

I have this code so far which ends up adding "my-class" to every TR element in the report table. However, I only want to add the class to the table row TR where the text was found. I am thinking I need a little more code to do this. Here are a few things I have tried so far:

if ($('#report-area table tr:contains("Name")', this).length > 0) {
$("#reportArea table tr", this).addClass("my-class");
}

I have also tried:

if ($('#report-area table tr:contains("Name")', this).length > 0) {
$(this).addClass("my-class");
}

... but that did not work either.

• javascript
• jquery
• theming

• 1 Per Sarfraz' comments, please clarify exactly what it is you mean by "where the text was found". – Blazemonger Commented Nov 8, 2011 at 20:26
• Agreed with @mblase75 :) – Sarfraz Commented Nov 8, 2011 at 20:30

4 Answers 4

Just use the selector with no fluff:

$('#report-area tr:contains("Name")').addClass('my-class');

http://api.jquery.com/contains-selector/

var $rows = $('#report-area table tr');

$rows.each(function(i, item) {

    $this = $(item);
    if ( $this.text() == 'Name' ) {
        $this.addClass('yourClass');
    }

});

I only want to add the class to the table row TR where the text was found.

You can do:

$('#report-area table tr').each(function(){
  if ($.trim($(this).text()).length > 0) {
    $(this).addClass("my-class");
  }
});

You can also use the .filter() function as well here:

$(document).ready(function () {
    $('#report-area tbody tr').filter(function () {
        return $.trim($(this).text()).length > 0;
    }).addClass("my-class");
});

I like this because it's a little cleaner and limits the number of rows you need to iterate over.