Testing Buttons in Google Viz Tables
this one behaves as it should
HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css">
<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>
JavaScript
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];
alert(item.column);
if (item.row != null && item.column != null) {
message += '{row:' + item.row + ',column:' + item.column + '}';
} else if (item.row != null) {
alert("dsdsd");
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);
});*/
}