Переопределить упрямый CSS с помощью Greasemonkey для вычисляемых ячеек?

Я создаю скрипт Greasemonkey для этой страницы. .

Что я хотел бы сделать, так это изменить все значения выигранных, ничьих и проигранных игр на их процентный счет и выделить ячейки DRAWN (или строки), которые имеют процентный счет, равный или превышающий 70 % для домашнего или выездного счета.

Мне удалось сделать первую часть, но у меня много проблем с выделением ячейки или строки.

Сначала я попробовал этот код

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

Который фактически выбрал все строки; но я не видел никакой разницы, пока не отключил эту часть кода из CSS через Firebug:

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

Что, к сожалению, совсем не работает.


person Giacomo Tecya Pigani    schedule 16.01.2013    source источник


Ответы (2)


Есть несколько проблем:

  1. Первый блок кода устанавливает backgroundColor элемента tbody (несколько раз), а не какой-либо строки или ячейки.
  2. .teamStandings tr.rowOne td и подобные стили переопределяют первый блок кода, поскольку они имеют более высокий < em>Конкретность.
  3. Второй блок кода имеет ту же проблему, что и первый.
    Дополнительно:
  4. Он использует $cells, даже не определяя его!
  5. if() имеет синтаксическую ошибку; or не является допустимым оператором.
  6. Используйте осмысленные имена переменных и используйте переменные вместо «магических чисел» (70).

Собрав все вместе, этот код выделяет ячейки Drawed, в которых более 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');
    }
} );

В настоящее время на примерной странице единственный применимый результат: Торино, выездные игры.


PS: вы должны разместить/запустить этот код перед кодом, преобразующим значения в проценты, который, как вы сказали, работал, но не отображался.

person Brock Adams    schedule 18.01.2013

В коде вы установили background-color для элемента tr.
Пока CSS на странице устанавливает background-color для элементов td в tr.

Таким образом, вы должны ориентироваться на одни и те же элементы 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)

Является ли ключевое слово or опечаткой в ​​условии if?

person Vishal Shah    schedule 16.01.2013
comment
Закрыть, но нужно удалить часть .parent(). - person Brock Adams; 19.01.2013