更改谷歌可视化表格图表的类名

Question

Here 是一个示例 Google 可视化表格图表，绘制为，

  table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'dataTable': data,
        'containerId': 'table',
        'options': {
            'width': '100%',
            'showRowNumber' : true
        },
    });
    table.draw();

上面的谷歌可视化表格图表有一个默认的类名google-visualization-table-table 和this link 解释了如何自定义其单独的样式。但是如何使用 jquery 将表的类名本身更改为 Twitter Bootstrap 样式？这样，我就可以使用该类名自定义整个表格样式。我尝试了类似

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

但这对我不起作用。

Answer 1

我更新了您提供的小提琴 - 请参阅 http://jsfiddle.net/8Z75X/2/ 了解工作演示

基本上，table.draw(); 发生在后台，因此 jquery 脚本运行并且没有元素可以更改其类。

相反，我添加了一个 ready 监听器，然后运行 ​​jQuery 脚本，而不是在 document.ready 块中。

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

PS - 您可能想尝试 removeClass，并链接您的方法调用 - 可能会快一点

$(".google-visualization-table-table")
    .removeClass('google-visualization-table-table')
    .addClass('table table-bordered table-condensed table-striped');

应该也能正常工作，但只会影响此表，而不影响页面中的其他表

更新

这是一个新版本，它也删除了表的所有子类。遍历所有节点并检查每个类以查看它是否以“google-visualization”开头的效率不是很高，但是如果没有要删除的所有类的完整列表并调用 $( ) 在每个项目上。 http://jsfiddle.net/8Z75X/5/

它还有一个额外的 jQuery 调用来重置 google 设置的固定宽度

.css("width", "");

只是提到......这似乎需要做很多工作才能将 Google 的插件重置为原生 html/js - 是否有您正在寻找的特定功能？有很多用于表格排序或过滤的轻量级插件，或者只是纯 js/jquery 来向表格添加行...