将按钮（HTML）插入Google可视化表格图表

Question

问题

使用Google Chart Tool可以将HTML值插入字段值，但是，我不相信这是一个好习惯。

我使用的方法如下：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {
    allowHtml: true
  });
}

我的问题

1. 有没有其他更好的方法来实现这一目标？
2. 有没有办法从这些按钮中捕获事件，同时还检索接收事件的行的ID？ 换句话说，我如何知道单击了哪个按钮以及它代表哪一行？

Answer 1

有没有办法从这些按钮中捕获事件，同时还检索接收事件的行的ID？ 换句话说，我如何知道单击了哪个按钮以及它代表哪一行？

试试这种方式

 google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawTable); function getSelectedRowNumber(table) { var selection = table.getSelection(); var message = ''; for (var i = 0; i < selection.length; i++) { var item = selection[i]; if (item.row != null && item.column != null) { message += '{row:' + item.row + ',column:' + item.column + '}'; } else if (item.row != null) { message += '{row:' + item.row + '}'; } else if (item.column != null) { message += '{column:' + item.column + '}'; } } if (message == '') { message = 'nothing'; } alert('You selected ' + message); } function drawTable() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Name', 'Height', 'Smokes','test'], ['Tong Ning mu', 174, true,'<input type="button" value="test" />'], ['Huang Ang fa', 523, false,'<input type="button" value="test" />'], ['Teng nu', 86, true,'<input type="button" value="test" />'] ]); // Create and draw the visualization. var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, { allowHtml: true, showRowNumber: true, width: '100%', height: '100%', cssClassNames: {tableRow: 'myClass'} }); // this works for buttons $(document).on('click','input[type=button]',function() { getSelectedRowNumber(table); }); // this works for clicking on row uncomment to test it /*$(document).on('click','tr.myClass',function() { getSelectedRowNumber(table); });*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="table_div"></div> 

Answer 2

我一直在使用谷歌图表，据我所知，没有更好的方法。

你的方式应该是有效的。 祝好运。 :)