JQuery .addclass to table <tr> element where text is found

Question

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.

Mold

Per Sarfraz' comments, please clarify exactly what it is you mean by "where the text was found". – Dimitris

Agreed with @mblase75 :) – Tuft

Answer 1

Just use the selector with no fluff:

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

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

Dimitris

I only want to add the class to the table row TR where the text was found. Looks like he wants to add class where any text is found :) – Tuft

@Tuft How did you come to that understanding? – Dimitris

@mblase75: I have quoted his sentence in my comment above. where the text was found. not where the Name was found. – Tuft

Sounds an awful lot like "some specific text" not "the exact text" nor "just any text" to me. – Eyepiece

@mblase75: And where do you see it means Name ? Let's wait for OP :) – Tuft

This worked great, thanks. To clarify, every report tr element will always have some form of "Name", i.e. "Last Name", First Name" etc... so it seems fine for what I am doing. – Mold

BTW, "less is more" was the case here, I had too much code and was over thinking it. Gotta love JQuery. :) – Mold

Answer 2

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

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

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

});

Coronograph

Instead of testing the text to be exactly 'Name' why don't you test the indexOf the toLowerCase to be not -1 – Eyepiece

indexOf doesn't always play nice with IE. – Coronograph

Very true. But he wants to capture where the field contains some text, and he didn't say if case mattered. – Eyepiece

Answer 3

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");
  }
});

Tuft

+1 Depending on the situation, $.trim() might be useful, since pure spaces/newlines are visually empty. – Io

Answer 4

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.

Showers