应用基于表值不同的userscript

目前，我正在寻找一个表包含各列，其中之一是“年龄”一栏，我想基于包含在<td>人数为应用一些userscript “年龄”栏。应用基于表值不同的userscript

考虑下表（的jsfiddle也在https://jsfiddle.net/LtLh2poc/1/）：

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

我也开到userscripts以外的其他解决方案，可帮助实现我的目标。请记住，我必须应用样式化客户端，因为我无法控制数据通过网络呈现的方式。

来源

2017-10-09 mrpeters

正如我怀疑，实际的页面在其结构贫“信息香”。而且，你不能指望像x-grid3-col-00NU0000003qEX1这样的课程长期稳定或可重复。（但应至少一个页面会话稳定。）

所以最难的部分将在一个强大的方式来寻找合适的细胞。

其他景点：

该代码看起来是Ext JS，这意味着它可能是AJAX驱动的，这意味着你必须使用AJAX技术的认识像waitForKeyElements或相似。
一旦你有正确的细胞，用.textContent或jQuery的.text()获得的原始时代的文字。
然后使用.trim()删除无关的空格。
然后使用parseInt()得到的数值。
执行任何所需的逻辑或数学。

在这种情况下，我会等待目标表，然后找到“年龄”列，然后使用它来获取实际的年龄值。

全部放在一起，这个完整的脚本适用于您的小提琴页，并且还应该适用于您的实际页面，如果这个问题的信息是正确和完整：

// ==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的“案例”界面，因此我在提供“实时”样本页时遇到了困难。希望这将小提琴有助于澄清一点 - 显然我只留下了许多的2列适用，但是这应该给你一个更好的画面。 https://jsfiddle.net/LtLh2poc/ – mrpeters

呀，那小提琴没有同类'class'和'id'值。这是一个很大的区别。修改您的问题以显示未编辑的确切表格HTML。如果每页有多个“案例编号”，请为其中的2个添加HTML。 –

再次感谢。原始帖子已更新。 – mrpeters

应用基于表值不同的userscript

回答

相关问题