Table stylish in last Google Chart version (v42) - css

Question

With the last google chart version, v42 some of the stylish I have for table have changed. This is the actual code I have:
https://jsfiddle.net/Khrys/mLgn76fu/
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
google.visualization.events.addListener(table, 'ready', function () {
$(".google-visualization-table-table").find('*').each(function (i, e) {
var classList = e.className ? e.className.split(/\s+/) : [];
$.each(classList, function (index, item) {
if (item.indexOf("google-visualization") === 0) {
$(e).removeClass(item);
}
});
});
$(".google-visualization-table-table")
.removeClass('google-visualization-table-table')
.addClass('table table-striped table-condensed table-hover')
.css("width", "85%");
});
table.draw(data);
}
This isn't working anymore. This should read the classes from bootstrap and render the table with bootstrap classes for table.

Answer 1

The function applying the style is applying it to the parent div. I changed to add .find('table') to get to the table child.
https://jsfiddle.net/mLgn76fu/7/
$(".google-visualization-table")
.removeClass('google-visualization-table')
.find('table')
.addClass('table table-striped table-condensed table-hover')
.css("width", "85%");
});
That works as a quick solution. In fact, the real problem and a better solution would be to rewrite the class "killer" you have as that is not doing what you expect. That is why the class ends up as google-visualization-table and not with table-table on the end as you expected.
I would just kill all classes, like this:
$(".google-visualization-table").find('*').each(function (i, e) {
$(e).removeClass();
});
And then add your bootstrap ones like in the fiddle or code above.