jquery - Changing the class name of Google visualization table chart -

here sample google visualization table chart drawn as,

  table = new google.visualization.chartwrapper({         'charttype': 'table',         'datatable': data,         'containerid': 'table',         'options': {             'width': '100%',             'showrownumber' : true         },     });     table.draw(); 

the above google visualization table chart has default class name google-visualization-table-table , this link explains how customize individual styles. how can change table's class name using jquery twitter bootstrap style? that, can customize whole table style using class name. tried

$(document).ready(function(){   $(".google-visualization-table-table").attr('class', 'table');   $("table").addclass( 'table-bordered table-condensed table-striped' ); }); 

but doesn't worked me.

i updated fiddle provided - see http://jsfiddle.net/8z75x/2/ working demo

basically, table.draw(); happening in background, jquery scripts run , there's no element change class of.

instead, added ready listener, , ran jquery script then, rather in document.ready block.

google.visualization.events.addlistener(table, 'ready', function(){     $(".google-visualization-table-table").attr('class', 'table');     $("table").addclass( 'table-bordered table-condensed table-striped' );     }); 

ps - may want try out removeclass instead, , chain method calls - might bit faster

$(".google-visualization-table-table")     .removeclass('google-visualization-table-table')     .addclass('table table-bordered table-condensed table-striped'); 

should work well, affect table, not other tables in page

update

here new version removes child classes of table. not efficient iterate on nodes , check each class see if starts 'google-visualization', can't think of way without full list of classes remove, , calling $() on each item anyway. http://jsfiddle.net/8z75x/5/

it has jquery call reset fixed width google sets

.css("width", ""); 

just mentioning ... seems lot of work go through reset google's plugin towards native html/js - there specific function you're looking for? there plenty of lighter plugins table sort or filtering, or pure js/jquery add rows table ...