jquery - 对于计算单元格，用 Greasemonkey 覆盖顽固的 CSS？

Question

我正在为 this page 创建一个 Greasemonkey 脚本.

我想做的是将获胜、平局和输掉的比赛的所有值更改为其百分比分数，并突出显示百分比分数相等的DRAWN单元格(或行)或主客场比分超过 70%。

我成功完成了第一部分，但在尝试突出显示单元格或行时遇到了很多麻烦。

首先我尝试了这段代码

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

实际上选择了所有行；但直到我通过 Firebug 从 CSS 禁用这部分代码后，我才发现任何差异:

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

所以我想让这个工作正常，每次浏览页面时覆盖原始 CSS 并开始工作更复杂的方案:

$('.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');
});

遗憾的是，这根本不起作用。

Answer 1

存在多个问题:

1. 第一个代码块是设置tbody的backgroundColor(多次)，而不是任何行或单元格。
2. .teamStandings tr.rowOne td 和类似样式会覆盖第一个代码块，因为它们具有更高的 Specificity .
3. 第二个代码块与第一个代码块存在相同的问题。
   另外:
4. 它使用 $cells 而不定义它!
5. if() 有语法错误； 或 不是有效的运算符。
6. 使用有意义的变量名称，并使用变量而不是“魔数(Magic Number)”(70)。

将所有内容放在一起，此代码突出显示了平局单元格，其中超过 70% 的游戏都是平局:

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');
    }
} );

目前，在 the sample page ，唯一适用的结果是都灵，客场比赛。

<小时/>

PS:您可以在将值转换为百分比的代码之前放置/运行此代码，您说该代码正在运行但未显示。