Use Greasemonkey to change row format based on one cell's contents?

Question

I have a table full of cells that look like this:

<tr class="dataRow odd">
    <td class="actionColumn"> someAction </td>
    <th class=" dataCell  booleanColumn" scope="row">
        <img class="checkImg" width="21" height="16" title="Not Checked" 
            alt="Not Checked" src="/img/checkbox_unchecked.gif">
        </img>
    </th>
    <td class=" dataCell  "> SomeData </td>
</tr>

The middle <th> cell will have an image with either title="Not Checked" or title="Checked" .

I'd like to apply some formatting to the entire row if title="Not Checked" . But, I'm new to Greasemonkey and javascript and CSS.

I found this similar question but I'm not entirely sure how to adapt it. This seems close, but it's not quite right and I'm not entirely certain how to simply change the FG/BG colors of the row.

var targetLinks = $("tr *dataRow*");

//--- Loop through the links and rewrite images that are in the same row.
targetLinks.each ( function () {
  //--- This next assumes that the link is a direct child of tr > td.
  var thisRow = $(this).parent ().parent ();

  //--- This may need tuning based on information not provided!
  var image  = thisRow.find ("img");

  //--- Replace all target images in the current row.
  if ("Not Checked" == image.attr ('title')) {
      //Apply Some formatting to thisRow   
    } 
  );
} 

Pointers would be appreciated!

Answer 1

This one's a little easier than the linked example, I think.
The key is understanding jQuery selectors and then using jQuery's .css() function.

Assuming the page doesn't use AJAX, here's a complete script that works on the HTML you provided:

// ==UserScript==
// @name     _Format the "not checked" rows
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
//--- The 'Not Checked' is case-sensitive
var notChkdRows = $(
    "tr.dataRow:has(th.booleanColumn img[title='Not Checked'])"
);

//--- Use whatever CSS you wish
notChkdRows.css ( {
    "background":   "lime",
    "font-size":    "3ex"
} );

//--- But some styles do not effect rows, must use on cells
notChkdRows.children ("td,th").css ( {
    "border":       "5px solid pink"
} );

---

You can play with a live demo of the code at jsFiddle .