单击标题时如何获取列名/索引

How to get column name/index when header is clicked

本文关键字：索引 获取 标题 何获取 单击      更新时间：2023-09-26

当在谷歌可视化表中单击相应的列名/标题时，如何获取列名（标题）？

http://jsfiddle.net/xj3ww79n/

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, '$10,000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, '$25,000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, '$8,000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,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));
  });
}

In 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);
}

在此处查看更新的小提琴：http://jsfiddle.net/xj3ww79n/4/

相关文章：