テーブル値に基づいてさまざまなユーザースクリプトを適用する

現在、さまざまな列を含む表を見ています。そのうちの1つは「年齢」列です。<td>に含まれる数値に基づいてユーザースクリプトを適用したい「年齢」列。テーブル値に基づいてさまざまなユーザースクリプトを適用する

次の表（またhttps://jsfiddle.net/LtLh2poc/1/でjsfiddle）を考慮してください

<div class="x-grid3-viewport" id="ext-gen9"> 
    <div class="x-grid3-header" id="ext-gen10"> 
    <div class="x-grid3-header-inner" id="ext-gen16" style="width: 1834px;"> 
     <div class="x-grid3-header-offset" style="width: 1235px;"> 
     <table style="width: 1216px;" cellspacing="0" cellpadding="0" border="0"> 
      <thead> 
      <tr class="x-grid3-hd-row"> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-checkbox" style="width:19px;"> 
       <div class="x-grid3-hd-inner x-grid3-hd-checkbox" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a> 
        <input id="allBox" value="" type="checkbox"><img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-LIST_RECORD_ID" style="width: 349px; display: none;"> 
       <div title="ID" class="x-grid3-hd-inner x-grid3-hd-LIST_RECORD_ID" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>ID<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-ACTION_COLUMN" style="font-weight: bold; width: 54px;"> 
       <div title="Action" class="x-grid3-hd-inner x-grid3-hd-ACTION_COLUMN" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>Action<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-CASES_CASE_NUMBER ASC" style="width: 98px;" id="ext-gen22"> 
       <div title="Case Number" class="x-grid3-hd-inner x-grid3-hd-CASES_CASE_NUMBER" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>Case Number<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-ACCOUNT_NAME" style="width: 436px;"> 
       <div title="Account Name" class="x-grid3-hd-inner x-grid3-hd-ACCOUNT_NAME" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>Account Name<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-CASES_SUBJECT" style="width: 436px;"> 
       <div title="Subject" class="x-grid3-hd-inner x-grid3-hd-CASES_SUBJECT" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>Subject<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
       <td class="x-grid3-hd x-grid3-cell x-grid3-td-00NU0000003qEX1" style="width: 161px;" id="ext-gen23"> 
       <div title="Case Age (w/o Weekends)" class="x-grid3-hd-inner x-grid3-hd-00NU0000003qEX1" style=""> 
        <a class="x-grid3-hd-btn" href="#"></a>Case Age (w/o Weekends)<img class="x-grid3-sort-icon" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div> 
       </td> 
      </tr> 
      </thead> 
     </table> 
     </div> 
    </div> 
    <div class="x-clear"></div> 
    </div> 
    <div class="x-grid3-scroller" id="ext-gen11" style="width: 1851px; height: 698px;"> 
    <div class="x-grid3-body" id="ext-gen12" style="width: 1216px;"> 
     <div class="x-grid3-row x-grid3-row-first" style="width: 1216px;"> 
     <table class="x-grid3-row-table" style="width: 1216px;" cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
      <tr> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-checkbox x-grid3-cell-first " style="width:19px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-checkbox" id="5000P00000cwwwD_checkbox"> 
        <input id="5000P00000cwwwD" value="5000P00000cwwwD" title="" class="checkbox" name="ids" type="checkbox"> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-LIST_RECORD_ID " style="width:349px;display:none;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-LIST_RECORD_ID" id="5000P00000cwwwD_LIST_RECORD_ID">5000P00000cwwwD</div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACTION_COLUMN " style="font-weight: bold;width:54px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACTION_COLUMN" id="5000P00000cwwwD_ACTION_COLUMN"><a href="/5000P00000cwwwD/e?retURL=%2F500%3Ffcf%3D00B0P000004ufUt%26rolodexIndex%3D-1%26page%3D1"><span>Edit</span></a> | 
        <a href="javascript: void(0);" title="Follow this case to receive updates in your feed." entityid="5000P00000cwwwD" 
        class="chatterFollowUnfollowAction " revtitle="Stop following this case to stop receiving updates in your feed."></a> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_CASE_NUMBER " style="width: 98px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_CASE_NUMBER" id="5000P00000cwwwD_CASES_CASE_NUMBER"><a href="/5000P00000cwwwD">00078468</a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACCOUNT_NAME " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACCOUNT_NAME" id="5000P00000cwwwD_ACCOUNT_NAME"><a href="/001U000000VAgh1"><span>Sample Customer 1</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_SUBJECT " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_SUBJECT" id="5000P00000cwwwD_CASES_SUBJECT"><a href="/5000P00000cwwwD"><span>Test Case 1</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-00NU0000003qEX1 x-grid3-cell-last " style="width: 161px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-00NU0000003qEX1" id="5000P00000cwwwD_00NU0000003qEX1">8</div> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
     <div class="x-grid3-row" style="width: 1216px;"> 
     <table class="x-grid3-row-table" style="width: 1216px;" cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
      <tr> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-checkbox x-grid3-cell-first " style="width:19px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-checkbox" id="5000P00000cxvLP_checkbox"> 
        <input id="5000P00000cxvLP" value="5000P00000cxvLP" title="" class="checkbox" name="ids" type="checkbox"> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-LIST_RECORD_ID " style="width:349px;display:none;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-LIST_RECORD_ID" id="5000P00000cxvLP_LIST_RECORD_ID">5000P00000cxvLP</div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACTION_COLUMN " style="font-weight: bold;width:54px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACTION_COLUMN" id="5000P00000cxvLP_ACTION_COLUMN"><a href="/5000P00000cxvLP/e?retURL=%2F500%3Ffcf%3D00B0P000004ufUt%26rolodexIndex%3D-1%26page%3D1"><span>Edit</span></a> | 
        <a href="javascript: void(0);" title="Follow this case to receive updates in your feed." entityid="5000P00000cxvLP" 
        class="chatterFollowUnfollowAction " revtitle="Stop following this case to stop receiving updates in your feed."></a> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_CASE_NUMBER " style="width: 98px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_CASE_NUMBER" id="5000P00000cxvLP_CASES_CASE_NUMBER"><a href="/5000P00000cxvLP">00078613</a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACCOUNT_NAME " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACCOUNT_NAME" id="5000P00000cxvLP_ACCOUNT_NAME"><a href="/001U000000QoTcg"><span>Sample Customer 2</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_SUBJECT " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_SUBJECT" id="5000P00000cxvLP_CASES_SUBJECT"><a href="/5000P00000cxvLP"><span>Test Case 2</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-00NU0000003qEX1 x-grid3-cell-last " style="width: 161px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-00NU0000003qEX1" id="5000P00000cxvLP_00NU0000003qEX1">2</div> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
     <div class="x-grid3-row x-grid3-row-last" style="width: 1216px;"> 
     <table class="x-grid3-row-table" style="width: 1216px;" cellspacing="0" cellpadding="0" border="0"> 
      <tbody> 
      <tr> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-checkbox x-grid3-cell-first " style="width:19px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-checkbox" id="5000P00000dSgXl_checkbox"> 
        <input id="5000P00000dSgXl" value="5000P00000dSgXl" title="" class="checkbox" name="ids" type="checkbox"> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-LIST_RECORD_ID " style="width:349px;display:none;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-LIST_RECORD_ID" id="5000P00000dSgXl_LIST_RECORD_ID">5000P00000dSgXl</div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACTION_COLUMN " style="font-weight: bold;width:54px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACTION_COLUMN" id="5000P00000dSgXl_ACTION_COLUMN"><a href="/5000P00000dSgXl/e?retURL=%2F500%3Ffcf%3D00B0P000004ufUt%26rolodexIndex%3D-1%26page%3D1"><span>Edit</span></a> | 
        <a href="javascript: void(0);" title="Follow this case to receive updates in your feed." entityid="5000P00000dSgXl" 
        class="chatterFollowUnfollowAction " revtitle="Stop following this case to stop receiving updates in your feed."></a> 
       </div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_CASE_NUMBER " style="width: 98px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_CASE_NUMBER" id="5000P00000dSgXl_CASES_CASE_NUMBER"><a href="/5000P00000dSgXl">00079520</a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-ACCOUNT_NAME " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-ACCOUNT_NAME" id="5000P00000dSgXl_ACCOUNT_NAME"><a href="/001U000000lTE2g"><span>Sample Customer 3</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-CASES_SUBJECT " style="width:436px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-CASES_SUBJECT" id="5000P00000dSgXl_CASES_SUBJECT"><a href="/5000P00000dSgXl"><span>Test Case 3</span></a></div> 
       </td> 
       <td class="x-grid3-col x-grid3-cell x-grid3-td-00NU0000003qEX1 x-grid3-cell-last " style="width: 161px;" tabindex="0"> 
       <div class="x-grid3-cell-inner x-grid3-col-00NU0000003qEX1" id="5000P00000dSgXl_00NU0000003qEX1">1</div> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    <a href="#" class="x-grid3-focus" tabindex="-1" id="ext-gen13" style="left: 0px; top: 1px;"></a> 
    </div> 
</div>

はuserscript介し方法はあります（他を使用するオープンuserscript内jQueryのように含む）ベーステーブルの行にCSSフォーマットを適用しますID "AGE"の列の値を調べ、それをテストし、その値に基づいて各行に適用しますか？

最適なのは、適用する条件として、より大きい、より小さい、等しいなどを利用できるように、値（この場合は「42」）を整数として変数に入れることができます特定のスタイル。

私のuserscriptは、クラス名に基づいて特定の背景色を適用することによって、概念としてのみ機能します。私の目標は、「年齢」の値に基づいて異なる背景色の値を適用することです。これは、より良い用語が不足しているための「ヒートマップ」の一種です。

if ($("body").hasClass("caseTab")) { 

    (function() { 
     var css = [".x-grid3-row-table", 
      " {", 
      "  background-color: #d2ffa0;", 
      " }" 
     ].join("\n"); 

     if (typeof GM_addStyle != "undefined") { 
      GM_addStyle(css); 
     } else if (typeof PRO_addStyle != "undefined") { 
      PRO_addStyle(css); 
     } else if (typeof addStyle != "undefined") { 
      addStyle(css); 
     } else { 
      var node = document.createElement("style"); 
      node.type = "text/css"; 
      node.appendChild(document.createTextNode(css)); 
      var heads = document.getElementsByTagName("head"); 
      if (heads.length > 0) { 
       heads[0].appendChild(node); 
      } else { 
       // no head yet, stick it whereever 
       document.documentElement.appendChild(node); 
      } 
     } 
    })(); 
}

私の目標を達成するのに役立つユーザースクリプト以外のソリューションもあります。私は、データがウェブ上に表示される方法を何も制御していないので、スタイリングクライアント側を適用しなければならないことに留意してください。

出典

2017-10-09 mrpeters

実際のページでは、その構造に「情報の匂い」がありません。また、x-grid3-col-00NU0000003qEX1のようなクラスは、安定しているか、長期にわたって繰り返し可能であると考えることはできません。（ただし、少なくとも1ページのセッションで安定しているはずです）

したがって、最も堅牢な部分は、堅牢な方法で適切なセルを見つけることです。

見所：

コードは、おそらく、AJAXを使用すると、waitForKeyElementsまたは類似のようなAJAXを認識技術を使用しなければならないことを意味している駆動だ意味し、Ext JSになりそうだということ。
正しいセルを取得したら、.textContentまたはjQueryの.text()を使用して生のテキストを取得します。
次に、余分な空白を削除するには.trim()を使用してください。
次に、parseInt()を使用して数値を取得します。
必要なロジックや演算を実行します。

この場合、ターゲットテーブルを待ってから「Age」列を見つけて、それを使用して実際の年齢値を取得します。

すべて一緒にそれを置く、この完全なスクリプトはあなたのフィドルのページのために働くと、質問情報が正確かつ完全である場合も、実際のページのために働く必要があります：私は、これは素晴らしいと思い

// ==UserScript== 
// @name  _Color row based on age 
// @match *://YOUR_SERVER.COM/YOUR_PATH/* 
// @match https://fiddle.jshell.net/LtLh2poc/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js 
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js 
// @grant GM_addStyle 
// ==/UserScript== 

const ageLow  = 1; 
const ageGuarded = 2; 
const ageElevated = 5; 
const ageHigh  = 10; 
const ageSevere  = 11; 

GM_addStyle (` 
    .gmAgeLow  { background: lightgreen; } 
    .gmAgeGuarded { background: lightblue; } 
    .gmAgeElevated { background: yellow; } 
    .gmAgeHigh  { background: orange; } 
    .gmAgeSevere  { background: pink; } 
    .gmError   { background: red; } 
`); 

//-- Wait for the target table, with the correct column header 
waitForKeyElements ("td:contains('Case Age')", setTableScope, true); 

function setTableScope (jNode) { 
    /* Not needed in this case, but helpful for non Ext JS pages... 
    var containingTable = jNode.parents ("table").first(); 
    containingTable.addClass ("gmTargetTable"); 
    */ 

    //-- Get the ExtJS column class for today: 
    var rawClassTxt = jNode[0].className; // Like: "x-grid3-hd x-grid3-cell x-grid3-td-00NU0000003qEX1" 
    var tdClssMtch = rawClassTxt.match (/(x\-grid\d+\-td-\w+)/); // Like: "x-grid3-td-00NU0000003qEX1" 
    if (tdClssMtch && tdClssMtch.length > 1) { 
     var tdClass  = tdClssMtch[1]; 
     var payLdClass = tdClass.replace (/\-td\-/, "-col-"); // To: "x-grid3-col-00NU0000003qEX1" 

     //-- Now that we know what class the "Age" numbers will have, wait for them: 
     waitForKeyElements ("." + payLdClass, colorRow); 
    } 
    else { 
     console.error ("Page structure mismatch. Unknown class:", rawClassTxt); 
    } 
} 

function colorRow (jNode) { 
    var age   = parseInt (jNode.text().trim(), 10); 
    var ageStyle = ""; 

    if  (age <= ageLow)   ageStyle = "gmAgeLow"; 
    else if (age <= ageGuarded)  ageStyle = "gmAgeGuarded"; 
    else if (age <= ageElevated) ageStyle = "gmAgeElevated"; 
    else if (age <= ageHigh)  ageStyle = "gmAgeHigh"; 
    else if (age >= ageSevere)  ageStyle = "gmAgeSevere"; 
    else { 
     ageStyle = "gmError"; 
     console.error ("Oops! Expected integer in cell: ", jNode); 
    } 

    //-- Set row background using CSS class 
    jNode.parents ("tr").first().addClass (ageStyle); 
}

出典

2017-10-09 19:42:02

、と私を取得正しい道を始める！ここのアプリケーションはSalesforceの「Cases」インターフェイスです。したがって、「ライブ」サンプルページを提供することが困難です。うまくいけば、このフィドルは少し明確にするのに役立ちます - 明らかに私は多くのうち2つの該当する列を残しましたが、これはあなたに良い画像を与えるはずです。 https://jsfiddle.net/LtLh2poc/ – mrpeters

ええ、そのフィドルは、同じ種類の 'class'と' id'値を持っていません。それは大きな違いになります。あなたの質問を編集して、編集されていないHTMLの正確な表を表示してください。 1ページに複数の「ケース番号」がある場合は、それらの2つのHTMLを含めます。 –

もう一度ありがとうございます。オリジナル投稿が更新されました。 – mrpeters

テーブル値に基づいてさまざまなユーザースクリプトを適用する

答えて

関連する問題