使用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的新手。

我發現了類似的問題，但我不確定如何適應它。 這似乎很接近，但這不是很正確，我也不完全確定如何簡單地更改行的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選擇器 ，然后使用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"
} );

---

您可以在jsFiddle上觀看代碼的實時演示 。