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

我更新了您提供的小提琴 - 请参阅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调用来重置谷歌设置的固定宽度

.css("width", "");

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

更改Google可视化表格图表的类名称

1 个答案: