0

次のようなセルでいっぱいのテーブルがあります。

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

ポインターをいただければ幸いです。

4

1 に答える 1

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 でコードのライブ デモを試すことができます。

于 2013-06-03T22:41:13.423 に答える