Appliquer variée userscript basée sur la valeur de la table

Je suis actuellement à une table contenant différentes colonnes, dont l'un est une colonne « âge », et je voudrais appliquer certaines userscript en fonction du nombre contenu dans le <td> pour la colonne "Age".Appliquer variée userscript basée sur la valeur de la table

Tenir compte le tableau suivant (jsFiddle aussi 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>

Est-il possible via userscript (ouvert à l'aide d'autres comprend comme jQuery dans le userscript) pour appliquer un format CSS à la ligne de table à base sur la valeur dans la colonne avec l'ID "AGE" et ont testé, et appliqué sur chaque ligne en fonction de la valeur? Idéalement, je voudrais pouvoir mettre la valeur (dans ce cas-ci "42") dans une variable comme un entier de sorte que je puisse utiliser plus grand que, moins, égal, etc. comme mes conditions pour l'application certains styles.

Mon userscript à ce stade ne fonctionne que comme un concept, en appliquant une certaine couleur d'arrière-plan basé sur un nom de classe. Mon but est d'appliquer différentes valeurs de couleur de fond basées sur la valeur "Age", comme une sorte de "heat map" en l'absence d'un meilleur terme. Je suis également ouvert à d'autres solutions en dehors des scripts utilisateurs qui peuvent aider à atteindre mon objectif. Gardez juste à l'esprit que je dois appliquer le côté client de style, car je n'ai aucun contrôle sur la façon dont les données sont présentées sur le web.

Source

2017-10-09 mrpeters

Comme je doutais, la page réelle a une mauvaise « parfum de l'information » dans sa structure. Et, vous ne pouvez pas compter sur des classes comme x-grid3-col-00NU0000003qEX1 pour être stable ou répétable pour longtemps. (Mais il devrait être stable pendant au moins une session de page.)

Ainsi, la partie la plus difficile sera de trouver les cellules appropriées d'une manière robuste.

: Non loin se

que le code semble être Ext JS, ce qui signifie qu'il est probablement conduit AJAX qui signifie que vous devez utiliser des techniques comme AJAX au courant waitForKeyElements ou similaire.
Une fois que vous avez les bonnes cellules, utilisez .textContent ou jQuery de .text() pour obtenir le texte d'âge brut. Puis, utilisez .trim() pour supprimer les espaces parasites externes.
Ensuite, utilisez parseInt() pour obtenir la valeur numérique.
Effectuez la logique ou les calculs souhaités.

Dans ce cas, j'attendrais la table cible, puis trouver la colonne "Age", puis l'utiliser pour obtenir les valeurs d'âge réelles.

Mettre tous ensemble, ce script complet fonctionne pour votre page de violon et devrait également fonctionner pour votre page réelle, si les informations de question est correcte et complète:

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

Source

2017-10-09 19:42:02

Je pense que c'est fantastique, et me fait commencé le bon chemin! L'application ici est l'interface "Cases" de Salesforce, d'où ma difficulté à fournir une page d'exemple "live". Espérons que ce violon aidera à clarifier un peu - évidemment, j'ai seulement laissé 2 colonnes applicables sur beaucoup, mais cela devrait vous donner une meilleure image. https://jsfiddle.net/LtLh2poc/ – mrpeters

Oui, ce violon n'a pas le même type de valeurs 'class' et' id'. Cela fait une grosse différence. Modifiez votre question pour afficher le tableau HTML exact, non modifié. S'il y a plus d'un «numéro de dossier» par page, incluez le code HTML pour deux d'entre eux. –

Merci encore. Message original mis à jour. – mrpeters

Appliquer variée userscript basée sur la valeur de la table

Répondre

Questions connexes