Metal Archives - Discography pages: 'Reviews' column split + sortable tables

Splits the Reviews column into Reviews(count) and Ratings(avg) and makes the table sortable.

当前为 2014-10-15 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Metal Archives - Discography pages: 'Reviews' column split + sortable tables
// @namespace   rikkie
// @description Splits the Reviews column into Reviews(count) and Ratings(avg) and makes the table sortable.
// @include     http://www.metal-archives.com/bands/*
// @version     1
// @grant       none
// 
// This userscript uses jQuery and it's plugin "tablesorter" (forked by Rob Garrison (Mottie)) http://mottie.github.io/tablesorter/docs/index.html
//
// ==/UserScript==

window.addEventListener('load', function() {



// STEP 1+2: SPLIT THE REVIEWS COLUMN/ADD A COLUMN
// It appends a column to the HTML table containing the displayed discography sub-category
function appendColumn(table) {
var tbl = document.getElementsByClassName("display discog")[table], // table reference
        i;
    
    var newCell, newText;    
    
    var tr = document.getElementsByClassName('display discog')[table].tHead.children[0],
    th = document.createElement('th');
    th.innerHTML = "Ratings(avg)";
    tr.appendChild(th);

    
    
    
    for (i = 1; i < tbl.rows.length; i++) {
        k = tbl.rows[i].cells[4].innerHTML;    // Retrieve the content of the current cell of the Review column and store it to variable k
        
        re1 = /<a [^>]*>[^(]*[(]([^)]+)/ ;      // RegEx which matches only the number(and the %) inside the parentheses
        l = re1.exec(k);                        // Execute the RegEx and store it to variable l

        if (re1.test(k) !=0 ){                  // If the RegEx has matches, (only) then create each cell with the result of the RegEx
            newCell = tbl.rows[i].insertCell(-1);
            newCell.innerHTML = l[1];            
            re2 = /<a [^>]*>([0-9]*)[^(]/ ;   // RegEx which matches only the number before the parentheses
            m = re2.exec(k);                  // // Execute the RegEx
            newCell = tbl.rows[i].cells[4];
            newCell.innerHTML = m[1];          
            }
        
    }    
}


// The following part (between the dashes) identifies how many elements on the page are the sub-tabs of DISCOGRAPHY,
// it does that by finding the last and the first such elements (containing the following texts -inside a <span> tag- )
// ----------------------------------------------------------------------------------------------------------------------------------


var temp;
var init = "ui-id-";
var end;

for (var i = 20; i >= 1; i--) {
  temp = init.concat(i);   
  if (document.getElementById(temp) != null) {        
   if ((document.getElementById(temp).innerHTML == "<span>Misc.</span>" )  ||
       (document.getElementById(temp).innerHTML == "<span>Demos</span>") ||
       (document.getElementById(temp).innerHTML == "<span>Lives</span>") ||
       (document.getElementById(temp).innerHTML == "<span>Main</span>"))        
      {
        end = i;        
        break;
        }
}
}


var start, temp;
for (var i = 1; i <= end; i++) {  
  temp = init.concat(i);   
  if (document.getElementById(temp).innerHTML.indexOf("<span>Complete discography</span>") != -1) {
    start = i;    
    break;
  }
}




// ui-id-7 ... ui-id-11  (helper array)
var myArray = [];
var uiid="ui-id-";
var temp;
var g = 1;
for(var i=start; i <= end; i++){
    temp = uiid.concat(i);
    myArray.push([temp]);     
  }







appendColumn(0);sorting();
  var length = end-start+1;
  
  if (1<=(length)){ var tab1 = document.getElementById(myArray[0]); tab1.addEventListener('click', function(){setTimeout(function () {appendColumn(0);sorting();}, 1000);}, false); }    // added 1 sec=1000msec delay, in order to wait the page to load before calling the function to add the extra column
  if (2<=(length)){ var tab2 = document.getElementById(myArray[1]); tab2.addEventListener('click', function(){setTimeout(function () {appendColumn(1);sorting();}, 1000);}, false); }
  if (3<=(length)){ var tab3 = document.getElementById(myArray[2]); tab3.addEventListener('click', function(){setTimeout(function () {appendColumn(2);sorting();}, 1000);}, false); }
  if (4<=(length)){ var tab4 = document.getElementById(myArray[3]); tab4.addEventListener('click', function(){setTimeout(function () {appendColumn(3);sorting();}, 1000);}, false); }
  if (5<=(length)){ var tab5 = document.getElementById(myArray[4]); tab5.addEventListener('click', function(){setTimeout(function () {appendColumn(4);sorting();}, 1000);}, false); }     
  


// ---------------------------------------------------------------------------------------------------------------------------------------











//  STEP 3: MAKE THE TABLE SORTABLE  (using jQuery and it's plugin "tablesorter")
// ( based on http://mottie.github.io/tablesorter/docs/index.html#Getting-Started & http://stackoverflow.com/a/18867406/3231411 )
// It inserts these two inline scripts in the <HEAD> of the page and includes jquery on this file
function sorting(){

var jq = document.createElement('script');
jq.src = "http://code.jquery.com/jquery-2.1.1.js" ;
document.querySelector('head').appendChild(jq);

jq = document.createElement('script');
jq.src = "https://raw.githubusercontent.com/Mottie/tablesorter/master/js/jquery.tablesorter.min.js" ;
document.querySelector('head').appendChild(jq);

jq.onload = procede; //DON'T TYPE PARENTHESIS


function procede() {        
    $('.display').tablesorter();
  };
}
  
 
  
  
  
}, false);