styling table row of google table visualization causing issues

[dv]

Hey all,

I need to custom a table row based on whether the value of one of the
cells is an even or odd number. So after table is created, I add this
line of code:


$('.google-visualization-table-td-number').each(function(){ $
(this).html()%2==0 ? $(this).parent().css('background-color','red !
important') : $(this).parent().css('background-color','blue !
important') });


I inspect in google chrome browser and indeed the background color is
applied to the table row. But it's not actually rendering the color
for the table row in the browser. Thats because whatever value is set
in .google-visualization-table-tr-even and .google-visualization-table-
tr-odd classes is overriding my background style.

So I do this:

$('.google-visualization-table-tr-even').removeClass('google-
visualization-table-tr-even');
$('.google-visualization-table-tr-odd').removeClass('google-
visualization-table-tr-odd');
$('.google-visualization-table-td-number').each(function(){ $
(this).html()%2==0 ? $(this).parent().css('background-color','red !
important') : $(this).parent().css('background-color','blue !
important') });

And it works, the colors display right, but as soon as I hover over
one of rows, the .google-visualization-table-tr-even and .google-
visualization-table-tr-odd classes come back and the backgorund-color
goes away.

Any good way to fix this problem?

thanks for response

[Dan Vig]

So is what I am trying to do not possible?

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

You might try wrapping your code for removing the even/odd class names from the table rows in a hover event listener:

$('.google-visualization-table-td-number').hover(function () {
    $('.google-visualization-table-td-number').each(function() {
        $(this).html()%2==0 ? $(this).parent().css('background-color','red ! important') : $(this).parent().css('background-color','blue ! important');
    });
});

[Dan Vig]

tried it and doesnt work

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/NQowN16vVYIJ.

[ChartMan]

Try first setting the table row class to some custom CSS class using cssClassNames option.

Afterwards, use your hack to color different cells.

HTH

ChartMan