使用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。