【问题标题】：Use Greasemonkey to change row format based on one cell's contents?使用 Greasemonkey 根据一个单元格的内容更改行格式？
【发布时间】：2017-11-11 18:46:47
【问题描述】：

我有一个表格，其中包含如下所示的单元格：

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

指针将不胜感激！

【问题讨论】：

标签： javascript html css html-table greasemonkey

【解决方案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一起玩。

【讨论】：