CODEWITHSUNDEEP
jqueryhtmlcss
renathy
renathy

Reputation: 5355

style table rows based on value (jquery)

I was not able to style table rows based on row values.

Currently I have:

$(document).ready(function () {
            $(".bulkGridClass").find("td").each(function () {               
               $(this).css("color", "Red");               
            });
        });

But instead I need something like this:

    $(document).ready(function () {
        $(".bulkGridClass").find("td").each(function () {               
           // IF TD CONTAINS TEXT "File" THEN add color red
           $(this).css("color", "Red");               
        });
    });

I have tried to use something like this:

    $(this).contains("File")

but this shows me $(this) doesn't have contains.

Upvotes: 0

Views: 1054

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Can skip the $.each and just do:

$(".bulkGridClass td:contains('File')").css("color", "Red");

If case sensitive:

$(".bulkGridClass td").filter(function(){
  return $(this).text().toLowerCase().indexOf('file') >-1;
}).css("color", "Red");

Provide some sample markup for test case

Upvotes: 1

Jason P
Jason P

Reputation: 27012

The text() function will return the text of the node. You can combine that with indexOf() to check for the string you're looking for:

$(document).ready(function () {
    $(".bulkGridClass").find("td").each(function () {               
       if ($(this).text().indexOf('File') > -1)
           $(this).css("color", "Red");               
    });
});

Another (probably better) option would be to use the :contains() selector:

$(document).ready(function () {
    $('.bulkGridClass td:contains("File")').css("color", "Red");               
});

Note that :contains() is case-sensitive, so File != file.

Upvotes: 1

Related Questions