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