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

Question

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

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

上面的 Google 可视化表格图表有一个默认的类名 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

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

基本上，table.draw(); 是在后台发生的，所以 jquery 脚本会运行并且没有要更改其类的元素。

相反，我添加了一个 ready 监听器，然后运行 ​​jQuery 脚本，而不是在 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 - 你可能想试试 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 来向表格添加行......