使用Greasemonkey根据一个单元格的内容更改行格式？ [英] Use Greasemonkey to change row format based on one cell's contents?

问题描述

我有一个表格，内容如下：

I have a table full of cells that look like this:

<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& code>单元格将具有 title =未检查或 title =Checked的图像 。

如果 title =Not Checked，我想对整行应用一些格式。但是，我是新的Greasemonkey和javascript和CSS。

I'd like to apply some formatting to the entire row if title="Not Checked". But, I'm new to Greasemonkey and javascript and CSS.

我发现这个类似的问题，但我不完全确定如何适应它。这似乎很接近，但它不是很对，我不完全确定如何简单地更改行的FG / BG颜色。

I found this similar question but I'm not entirely sure how to adapt it. This seems close, but it's not quite right and I'm not entirely certain how to simply change the FG/BG colors of the row.

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

指针将不胜感激。

推荐答案

这个比我链接的例子要容易一些。

关键是理解 jQuery选择器，然后使用jQuery的 .css（）函数。

This one's a little easier than the linked example, I think.
The key is understanding jQuery selectors and then using jQuery's .css() function.

假设网页不使用AJAX，这里是完整的脚本，可以在您提供的HTML上使用：

Assuming the page doesn't use AJAX, here's a complete script that works on the HTML you provided:

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

---

---

这篇关于使用Greasemonkey根据一个单元格的内容更改行格式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！