2015-06-15 66 views
0

如何在Google可視化表中單擊相應列名/標題時獲取列名(標題)?如何在單擊標題時獲取列名/索引

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

} 

回答

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

看到更新後的提琴在這裏:http://jsfiddle.net/xj3ww79n/4/

相關問題