a script I was using to reformat the presentation of game data for heroes of the Storm at hotslogs.com

v1 Lunara build

// ==UserScript==
// @name         HotSLogs Role Sorting icons
// @namespace    https://gist.github.com/robbiemu/02882b97f38ef98774d4/
// @version      v1 Lunara build
// @description  Provides roll icons for each class, which are clickable to toggle hiding of other classes
// @author       Robbiemu
// @include      /https?\:\/\/www.hotslogs.com\//
// @require      https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @grant        none
// ==/UserScript==

window.jQ=jQuery.noConflict(true);

MoaH = { 
    "warrior":    ["Anubarak","Tyrael","Johanna","Sonya","Arthas","Muradin","Chen","Diablo","ETC","Stitches","Leoric", "Rexxar", "Artanis", "Chogall", "Cho"],
    "support":    ["Brightwing","Rehgar","Uther","LiLi","Tyrande","Malfurion","Tassadar","Kharazim", "LtMorales"],
    "assassin":   ["Jaina","Kaelthas","Zeratul","Illidan","Kerrigan","Thrall","Falstad","Nova","Valla","Raynor","Tychus","TheButcher", "Chogall", "Gall", "Lunara"],
    "specialist": ["TheLostVikings","Murky","Sylvanas","Nazeebo","Zagara","Azmodan","Gazlowe","Abathur","SgtHammer"]
};

Subroles = {
    "Burst Damage": ["#E33B3B", ["Jaina", "Kaelthas"]],
    "Bruiser": ["#E3A23B", ["Anubarak", "Artanis", "Arthas", "Leoric", "Sonya", "Tyrael"]],
    "Sustained Damage": ["#E33B8E", ["Falstad", "Gall", "Illidan", "Nazeebo", "Raynor", "Thrall", "Tychus", "Valla", "Lunara"]],
    "Tank": ["#CCCC99", ["Chen", "Cho", "Chogall", "Diablo", "ETC", "Johanna", "Muradin", "Rexxar", "Stitches"]],
    "Ambusher": ["#E3E33B", ["Kerrigan", "Nova", "TheButcher", "Zeratul"]],
    "Healer": ["#3BE33B", ["Brightwing", "Kharazim", "LiLi", "LtMorales", "Malfurion", "Rehgar", "Uther"]],
    "Siege": ["#A660E8", ["Azmodan", "Gazlowe", "SgtHammer", "Sylvanas", "Zagara"]],
    "Support": ["#60CDCD", ["Tassadar", "Tyrande"]],
    "Utility": ["#DDDDDD", ["Abathur", "Murky", "TheLostVikings"]]
};

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function formatHeroesTable() {
    jQ('thead tr[role=row] > th[scope=col]:contains("Hero"), thead tr > th[scope=col] > a:contains("Hero")').parents('table').each(function(i,datatable) {
        console.log("formatting heroes table");
        
        jQ(Object.keys(MoaH)).each(function(k,role) {
            var image = '<img src="http://www.heroesfire.com/images/wikibase/icon/roles/'+role+'.png" data-title="'+ role.charAt(0).toUpperCase() + role.slice(1) +'" style="max-width: 20px; margin-right: 2px; background-color: rgba(0,0,0,0);" />';
            jQ(MoaH[role]).each(function(k,hero) {
                jQ(jQ(image).insertBefore(jQ(datatable).find('tbody tr img[id$=imgcolumn][src*='+hero+']')).parents('tr')[0]).addClass(role);
            });

            jQ('img[data-title='+role.charAt(0).toUpperCase()+role.slice(1)+']').click(function() { 
                jQ(this).removeAttr("title");
                jQ(datatable).find('tbody tr:not(.'+role+')').toggle(); 
            });

            jQ('img[data-title='+role.charAt(0).toUpperCase()+role.slice(1)+']').hover(
                function() {
                    jQ(this).attr("title", jQ(this).data("title"));
                },
                function() {
                    jQ(this).removeAttr("title");
                }
            );        
        });
        jQ(Object.keys(Subroles)).each(function(k,role) {
            var bgcA =  hexToRgb(Subroles[role][0]);
            var bgc = "rgb(" + bgcA.r + "," + bgcA.g + "," + bgcA.b + ")";
            jQ(Subroles[role][1]).each(function(k,hero) {
                jQ('tbody tr img[id$=imgcolumn][src*='+hero+']').parent().css("background-color", bgc);
            });
        });
    });
}

jQ(document).ready(function() {       
    formatHeroesTable();
    jQ(jQ('#DataTables_Table_0 > tbody tr')[Math.floor(jQ('#DataTables_Table_0 > tbody tr').length/2)]).css("backgroundColor", "silver")
});