javascript - Multiple google visualization table on one page -

i'm having problem creating multiple google visualization tables on single page. how dynamically generate unknown number of google visualization tables on single page complete functionality?

i referenced (almost identical) question how add 2 google charts on 1 page? dominor novus's solution not if not aware, prior creation of page, of number of tables. example, need have 5 tables, need have 1.

my question how dynamically create page dynmically create multiple google visualization tables each own unique identifier. when user clicks on row in table able return row number unique identifier dynamically created table?

in order come solution problem, must store table data , table object in arrays. first create arrays data , table object @ top of page.

var tabledata=new array(); var table=new array(); var tableid=0; 

we generate our table storing them in arrays referenced unique identifier. in order fulfill select functionality of table add listener table object. grab id of containing div of table, , take substring of id discover table has been clicked. take row of table done using method .getselection(). once have both row , table id can return users based on table , row clicked.

//create dynamic number of tables (id=0;id<num_of_tables;id++) {     var tableid = 'table_div' + id; //the id of google visualization table      //generate div google visualization table     $('<div/>', {         id: tableid,         class: 'cd_table'     }).appendto('#tables');      listdata = data;      if (listdata[id].length>0) {         tabledata[id] = new google.visualization.datatable();          tabledata[id].addcolumn('string', 'name');         tabledata[id].addcolumn('string', 'email');          (var i=0; i<listdata[id].length; i++) {             tabledata[id].addrows(1);                        tabledata[id].setcell(i,0,listdata[id][i].name);             tabledata[id].setcell(i,1,listdata[id][i].email);         }     }      table[id] = new google.visualization.table(document.getelementbyid(tableid));     table[id].draw(tabledata[id], {showrownumber: false, sortcolumn: 0});      google.visualization.events.addlistener(table[id], 'select', function() {         $(document).on('mousemove', '.google-visualization-table', function() {             tableid=$(this).closest('.cd_table').attr('id').substring(9);         });          var row;         if (table[tableid].getselection()[0] != undefined) {             row = table[tableid].getselection()[0].row;             lastrowclick = row;         } else row = lastrowclick;         alert('table id:' + tableid + ' row:' + row);     }); } 

this perfect, works if clicked on table once. must add mousemove event in initial page load jquery function, so:

$(document).on('mousemove', '.google-visualization-table', function() {      tableid=$(this).closest('.cd_table').attr('id').substring(9); }); 

and done. able create unlimited amount of dynamically generated google visualization tables, can return row clicked , id of table clicked.