单击 header 时如何获取列 name/index

Question

如何在google可视化中单击相应的列名/header时获取列名(header)table?

google.load('visualization', '1', {packages: ['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');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, ',000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, ',000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, ',000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, ',000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, ',000');
  data.setCell(4, 2, false);

  var table = new google.visualization.Table(document.getElementById('table_div'));


  table.draw(data, {showRowNumber: true,sort: 'disable'});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });

}

Answer 1

在jQuery

$(".google-visualization-table-th").click(function(e){
    alert("You selected column: " + e.toElement.innerText);
});

在纯 JS 中

var h = document.getElementsByClassName("google-visualization-table-th");

for (i = 0; i < h.length; i++) {
    h[i].addEventListener("click", function (e) {
        alert("You selected column: " + e.toElement.innerText);
    }, false);
}

在此处查看更新后的 fiddle：http://jsfiddle.net/xj3ww79n/4/

单击 header 时如何获取列 name/index

How to get column name/index when header is clicked

javascript

google-visualization