테이블 값을 기반으로 다양한 사용자 스크립트 적용

현재 "나이"열 중 하나 인 다양한 열이 포함 된 테이블을보고 있는데 <td>에 포함 된 숫자를 기반으로 일부 사용자 스크립트를 적용하고 싶습니다. Age 칼럼 테이블 값을 기반으로 다양한 사용자 스크립트 적용

<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를 통해 방법을 기준으로 테이블 행에 CSS 형식을 적용 (다른 하나는 userscript 내에서 jQuery를 같이 포함하여 개방) 거기 :

은 ( https://jsfiddle.net/LtLh2poc/1/에서 또한 jsfiddle) 다음 표를 고려 ID가 "AGE"인 열의 값을 확인한 다음 값에 따라 각 행에 적용 했습니까?

최적의 방법으로, 값 (이 경우 "42")을 정수로 변수에 넣을 수있어서 적용 조건보다 큼,보다 작음, 같음 등을 사용할 수 있습니다. 특정 스타일.

이 시점에서 필자의 userscript는 클래스 이름을 기반으로 특정 배경색을 적용하여 개념으로 만 작동합니다. 내 목표는 "Age"값을 기반으로 다른 배경색 값을 적용하는 것인데, 더 나은 용어가없는 "열지도"의 일종입니다.

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과 같은 클래스에 속할 수 없습니다. (그러나 적어도 하나의 페이지 세션에서 안정적이어야합니다.)

따라서 가장 어려운 부분은 적절한 방법으로 적절한 셀을 찾는 것입니다.

추가 포인트 :

이

그 코드의 모양은 아마 AJAX 당신이 waitForKeyElements 또는 이와 유사한 같은 AJAX 인식 기술을 사용해야 함을 의미하는 구동 의미합니다 Ext JS 될 수 있습니다.
올바른 셀이 있으면 .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의 "Cases"인터페이스이므로 "라이브"샘플 페이지를 제공하는 데 어려움이 있습니다. 이 피들 (phiddle)이 비트를 분명히 밝히는 데 도움이되기를 바랍니다. 분명히 많은 부분에서 2 개의 적용 가능한 열을 남겨 두었습니다.하지만 이것은 더 나은 그림을 제공 할 것입니다. https://jsfiddle.net/LtLh2poc/ – mrpeters

네, 그 바이올린에는 같은 종류의'class'와'id' 값이 없습니다. 그것은 큰 차이를 만듭니다. 수정되지 않은 정확한 표 HTML을 보려면 질문을 편집하십시오. 페이지 당 둘 이상의 "사례 번호"가있는 경우 그 중 2 개에 대해 HTML을 포함하십시오. –

다시 한번 감사드립니다. 원본 게시물이 업데이트되었습니다. – mrpeters

테이블 값을 기반으로 다양한 사용자 스크립트 적용

답변

관련 문제