- thank you asgallant! you give me a really good example! in the example
http://jsfiddle.net/asgallant/kb6gY/, how i can get the row number and
column number when mouseover is fired?
function alertCellContents () {
alert(this.innerHTML);// i also need to output row number and
column number
}
- if it cannot be realized, i decided to use "select" function instead
of onmouseover. i have read the example given in the tutorial. but there is
a small mistake. i just can get the row number but the column number is
null. how to get the column number?
//code is here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['table']});
</script>
<script type="text/javascript">
var visualization;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Height');
data.addColumn('boolean', 'Smokes');
data.addRows(3);
data.setCell(0, 0, 'Tong Ning mu');
data.setCell(1, 0, 'Huang Ang fa');
data.setCell(2, 0, 'Teng nu');
data.setCell(0, 1, 174);
data.setCell(1, 1, 523);
data.setCell(2, 1, 86);
data.setCell(0, 2, true);
data.setCell(1, 2, false);
data.setCell(2, 2, true);
function drawVisualization() {
visualization = new
google.visualization.Table(document.getElementById('table'));
visualization.draw(data, null);
google.visualization.events.addListener(visualization, 'select',
selectHandler);
}
function selectHandler() {
var selection = visualization.getSelection();
var message = '';
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
alert(item.row);
alert(item.column);*//it is null*
}
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="table"></div>
</body>
</html>
On Thursday, December 5, 2013 7:17:17 PM UTC+1, asgallant wrote:
>
> Here's one way to do it: http://jsfiddle.net/asgallant/kb6gY/
>
> If your table is large, I don't recommend that you use this method, as it
> creates an individual event handler for each cell. There is a more
> efficient way of doing this: use a single event handler on the table, parse
> the event.target/event.srcElement to figure out what is being moused over,
> and then fire the alert when appropriate. Writing a script to do that is
> far more complicated, however, and can get even more complicated if you
> allow HTML in your table cells.
>
> On Thursday, December 5, 2013 5:51:23 AM UTC-5, min ji wrote:
>>
>> Thank you, asgallant! could you please give me a detail example?
>> Here are the codes. when the function onmouseover is fired, a messagebox
>> will be show: i eat ***. how to write it? thank you very much!
>> function drawVisualization() {
>>
>> var data = google.visualization.arrayToDataTable([
>> ['MON', 'TUE', 'WED','THUR', 'FRI', 'SAT'],
>> ['apple', 'banana', 'melon','apple', 'banana', 'melon'],
>>
>> ]);
>>
>>
>> visualization = new google.visualization.Table(document.getElementById(
>> 'table'));
>> visualization.draw(data, null);
>> google.visualization.events.addListener(myTable, 'ready', function () {
>> // set up mouse event handlers on table elements
>> });
>> }
>>
>>
>> On Thursday, December 5, 2013 5:49:05 AM UTC+1, asgallant wrote:
>>>
>>> The Table visualization does not throw mouse events, so you have to set
>>> them up yourself using standard javascript. You should set them up inside
>>> a "ready" event handler for the table to ensure that the table elements
>>> exist when you create the events.
>>>
>>> google.visualization.events.addListener(myTable, 'ready', function () {
>>> // set up mouse event handlers on table elements
>>> });
>>>
>>> On Wednesday, December 4, 2013 4:26:01 PM UTC-5, min ji wrote:
>>>>
>>>> hi,
>>>> i want to add a onmouseout function to a table. i add listener but it
>>>> cannot work. anybody knows how to use it? An example will be better.
>>>> thank you!
>>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
