Override stubborn CSS with Greasemonkey, for calculated cells?

Question

I'm creating a Greasemonkey script for this page.

What I would like to do is to change all the values of the games won, drawn and lost to their percentage score and the highlight the DRAWN cells (or rows) which have a percentage score equal or over 70% for the home or away scores.

I managed to do the first part but I'm having a lot of troubles trying to highlight a cell or a row.

First I tried this code

$('.teamStandings tbody tr').each(function() {
    $(this).parent().css('backgroundColor', '#EFEF00');
});

Which actually selected all the rows; but I wasn't able to see any difference until I disabled this part of the code from the CSS via Firebug:

.teamStandings tr.rowOne td {
  background-color: #EEEEEE;
}

So I would like to get this working, overriding the original CSS every time I browse the page and get working a more complicated scheme:

$('.teamStandings tbody tr').each(function() {
  var x1=parseInt($cells.eq(8).text(),10) ;
  var x2=parseInt($cells.eq(9).text(),10) ;
  var x3=parseInt($cells.eq(10).text(),10) ;

  var y1=parseInt($cells.eq(11).text(),10) ;
  var y2=parseInt($cells.eq(12).text(),10) ;
  var y3=parseInt($cells.eq(13).text(),10) ;      


  if ((x2/(x1+x2+x3))*100 >= 70) or (y2/(y1+y2+y3))*100 >= 70)
      $(this).parent().css('backgroundColor', '#EFEF00');
});

Which sadly doesn't work at all.

Answer 1

There are multiple issues:

1. The first code block is setting the backgroundColor of the tbody (multiple times), not any row or cell.
2. The .teamStandings tr.rowOne td, and similar styles, override the first code block because they have a higher Specificity.
3. The second code block has the same problem as the first.
   Additionally:
4. It uses $cells without ever defining it!
5. The if() has a syntax error; or is not a valid operator.
6. Use meaningful variable names, and use variables instead of "magic numbers" (70).

Putting it all together, this code highlights the Drawn cells where more than 70% of the games were draws:

var highlightPercent    = 70;

$('.teamStandings tr').each ( function () {
    var columns     = $(this).find ('td');

    var homeWon     = parseInt (columns.eq( 8).text(), 10) ;
    var homeDraw    = parseInt (columns.eq( 9).text(), 10) ;
    var homeLoss    = parseInt (columns.eq(10).text(), 10) ;

    var awayWon     = parseInt (columns.eq(11).text(), 10) ;
    var awayDraw    = parseInt (columns.eq(12).text(), 10) ;
    var awayLoss    = parseInt (columns.eq(13).text(), 10) ;

    if (homeDraw * 100 / (homeWon + homeDraw + homeLoss)  >= highlightPercent) {
        //-- To highlight the whole row, uncomment the next line.
        //columns.css ('backgroundColor', 'pink');
        columns.eq( 9).css ('backgroundColor', '#EFEF00');
    }

    if (awayDraw * 100 / (awayWon + awayDraw + awayLoss)  >= highlightPercent) {
        //-- To highlight the whole row, uncomment the next line.
        //columns.css ('backgroundColor', 'pink');
        columns.eq(12).css ('backgroundColor', '#EFEF00');
    }
} );

Currently, on the sample page, the only applicable result is Torino, away games.

---

PS: You would place/run this code before the code that converts values to percentages, which you said was working and did not show.