用 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() 有语法错误； or 不是有效的运算符。
6. 使用有意义的变量名，并使用变量而不是“幻数” (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：您可以在将值转换为百分比的代码之前放置/运行此代码，您说该代码有效但未显示。

Answer 2

在您的代码中，您已为 tr 元素设置了 background-color。
虽然页面上的 CSS 正在为 tr 中的 td 元素设置 background-color。

所以你应该定位相同的 td 元素而不是 tr 元素

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

在您的第二个代码块中

if ((x2/(x1+x2+x3))*100 >= 70) or (y2/(y1+y2+y3))*100 >= 70)

在 if 条件下，or 关键字是不是拼写错误？