Table 时尚在最后 Google 图表版本 (v42)

Question

在上一个 google 图表版本中，v42 我为 table 设计的一些风格已经改变。这是我的实际代码：

  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: ',000'}, true],
      ['Jim',   {v:8000,   f: ',000'},  false],
      ['Alice', {v: 12500, f: ',500'}, true],
      ['Bob',   {v: 7000,  f: ',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);
  }

这不再有效了。这应该从 bootstrap 中读取类并使用 bootstrap 类为 table 渲染 table。

Answer 1

应用样式的函数正在将其应用到 parent div。我更改为添加 .find('table') 以到达 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%");
    });

这是一个快速的解决方案。事实上，真正的问题和更好的解决方案是重写您拥有的 class "killer"，因为它没有按照您的预期进行。这就是为什么 class 最终变成 google-visualization-table 而不是像您预期的那样以 table-table 结束。

我会杀死所有 classes，像这样：

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

然后像 fiddle 或上面的代码一样添加 bootstrap。

Table 时尚在最后 Google 图表版本 (v42)

Table stylish in last Google Chart version (v42)

css

google-visualization