Question

I need to add a CSS class to the TR (or multiple TR’s) of the parent of a TD containing some specific text.

Because of the CMS I can’t control the code, but I can add some Jquery and CSS.

I’ve tried a few things, but I’ve had no luck.

Here is an example of what I had in mind.

<style>
  tr.highlight { background: Blue;}
</style>

<table>
  <tr>
    <td>
      Pet
    </td>
    <td>
     Number of Legs
    </td>
  </tr>
  <tr>
    <td>
      Cat
    </td>
    <td>
      4
    </td>
  </tr>
  <tr>
    <td>
      Doggie
    </td>
    <td>
      4
    </td>
  </tr>
</table>

And I essentially want the jquery to add that class (highlight) to the offending TR.

** I know this is not an ideal approach, but desperate times call for desperate measures. **

Thanks for your help.

Answer 1

You’re looking for the :contains() selector.

The following will add the class highlight to the parent element (should be TR) of every TD containing the string "doggie":

$('td:contains("doggie")').parent().addClass('highlight');

Note that the text must have matching case to be selected, i.e. $('td:contains("doggie") and $('td:contains("DoGGiE")')aren’t the same!