使用Greasemonkey根據一個單元格的內容更改行格式？

Question

我有一個完整的，看起來像這種細胞的表：

<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> 

中間<th>細胞將有兩種title="Not Checked"或title="Checked"的圖像。

如果title="Not Checked"我想對整行應用一些格式。但是，我是Greasemonkey，JavaScript和CSS的新手。

我發現this similar question但我不完全確定如何適應它。這看起來很接近，但它並不完全正確，我不完全確定如何簡單地更改該行的FG/BG顏色。

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

指針將不勝感激！

Answer 1

這個比鏈接的例子要容易一點，我想。
關鍵是要了解jQuery selectors然後用jQuery的.css()函數。

假設頁面不使用AJAX，這裏的一個完整的腳本是您提供的HTML工作：

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

---

你可以玩a live demo of the code at jsFiddle。