wrap each row by link google visualization table

问题:

I have a pop windows for every table row once they selected by user from

google.visualization.events.addListener(table, 'select', function() {}

But default google visualization table rows not display as clickable.

I want them to display as clickable to users. So I added this code with no luck.

var container = document.getElementById(divName);
var table = new google.visualization.Table(container);
table.draw(data, options);
google.visualization.events.addListener(table, 'ready', function() {
    container.getElementsByTagName('TR')[0].html = '<a href="#" />';
    console.log("table ready");
}); 

Even console not print anything. Any help would be appriciated.

回答1:

if you just want the cursor to change to a hand when the user hovers the row
you can use css on the chart div

#chart_div tr {
  cursor: pointer;
}

you could also use the chart's cssClassNames option and assign the css that way
only problem there is you lose the chart's default css,
so have to supply more than just cursor

if you want a 'hyperlink' to show, you can change the text of the first cell
but you cannot wrap entire rows in an anchor tag <a>

see following working snippet, which incorporates both...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Month', '2015', '2016'],
      ['Jan', 10, 15],
      ['Feb', 12, 18],
      ['Mar', 14, 21],
      ['Apr', 16, 24]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Table(container);

    google.visualization.events.addListener(chart, 'ready', function () {
      var tableRows = container.getElementsByTagName('tbody')[0].rows;
      // change first cell to link
      Array.prototype.forEach.call(tableRows, function(row) {
        row.cells[0].innerHTML = '<a href="#">' + row.cells[0].innerHTML + '</a>';
      });
    });

    chart.draw(data, {
      allowHtml: true
    });
  },
  packages: ['table']
});

#chart_div tr {
  cursor: pointer;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>