上一版谷歌图表(v42)中的表格风格

Question

随着上一个谷歌图表版本，v42的一些时尚的表我已经改变了。这是我的实际代码：

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);
  }

这已经不管用了。这应该从引导程序读取类，并使用表的引导类来呈现表。

Answer 1

应用样式的函数将其应用于父div。我更改为添加.find(' table ')以到达表子。

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%");
    });

​

​

这是一个快速的解决方案。事实上，真正的问题和更好的解决方案是重写类“杀手”，因为这样做不是你所期望的。这就是为什么这个类的结果是google可视化表，而不是像您预期的那样在表的末尾。

我会杀了所有的班级，就像这样：

    $(".google-visualization-table").find('*').each(function (i, e) {
        $(e).removeClass();
    });

然后添加您的引导，如在小提琴或上面的代码。