<?xml version="1.0" encoding="utf-8"?>
<ztmstudio>
   <ztml>
     <lang>
       <fr>
         <title><![CDATA[Google Table]]>
</title>
         <srchlp><![CDATA[<DIV><b>Google Table</b></DIV>
]]>
</srchlp>
</fr>
       <en>
         <title><![CDATA[Google Table]]>
</title>
         <srchlp><![CDATA[<DIV><b>Google Table</b></DIV>
]]>
</srchlp>
</en>
</lang>
</ztml>
   <html>
     <head><![CDATA[<script type="text/javascript" src="https://ztmstudio.com/ZTmStudio.js"></script>  
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>]]>
       <script><![CDATA[ 	function drawTable() {
      data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows(4);
        data.setCell(0, 0, 'Mike');
        data.setCell(0, 1, 10000, '10.000');
        data.setCell(0, 2, true);
        data.setCell(1, 0, 'Jim');
        data.setCell(1, 1, 8000, '8.000');
        data.setCell(1, 2, false);
        data.setCell(2, 0, 'Alice');
        data.setCell(2, 1, 12500, '12.500');
        data.setCell(2, 2, true);
        data.setCell(3, 0, 'Bob');
        data.setCell(3, 1, 7000, '7.000');
        data.setCell(3, 2, true);
        var table = new google.visualization.Table(ZTmCln('DIV','map'));
        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
call = function (event){
var div=ZTmEvent(event).target;
	if (event.type =='click' && div.nodeName=='IMG' )  
	{  
		if(/window-x/.test(div.src)) {
			if(ZTmlocal==1){
			ztmappboite.style.display="none";
			ztmreaderboite.style.display="block";
			ztmreaderboite.onclick=callreader;
			fileContents.value=getXmlAsString(xmlDoc);
			}           											
	        }
	 if(/window-help/.test(div.src)) {ZTmHlp();}	
	}
	if (event.type =='click' && div.nodeName=='TD')  
	{
	 
        if(/ztmtitle/.test(div.className)) {ZTmHlp();return;}
	value = div.innerHTML;
	var type=data.getColumnType(posTd(div).c);
	if (/number/.test(type)){
		var val = (prompt('Enter',value)); 
		var ival=parseInt(val);
           }
	if (/string/.test(type)){
	var val = prompt('Enter',value); 
        }
	if (/boolean/.test(type)){
	var val = prompt('Enter true or false',value); 
	if (/true/.test(val))	val=true	;
	if (/false/.test(val))	val=false	;
	}
	alert(posTd(div).r+"-"+posTd(div).c);
	data.setCell(posTd(div).r, posTd(div).c, ival,val);

var table = new google.visualization.Table(sfDiv);
        table.draw(data, {showRowNumber: true});

}
	if (event.type =='click' && div.nodeName=='INPUT')  
	{

}
}
function posTd(div){
var I=0,J=0,K=0;
var tr = div.parentNode;
var atd = tr.getElementsByTagName('TD');
	for (var i=0;i<atd.length;i++){
	if (atd.item(i)==div) var I=i-1;
	}
var atable = tr.parentNode;
var atr = atable.getElementsByTagName('TR');
	for (var i=0;i<atr.length;i++){
	if (atr.item(i)==tr) var J=i;
	}
	return {r: J, c: I};

}
function posTh(div){
var I=0,J=0,K=0;
var tr = div.parentNode;
var atd = tr.getElementsByTagName('TH');
	for (var i=0;i<atd.length;i++){
	if (atd.item(i)==div) var I=i-1;
	}
	return {r: 0, c: I};

}
function ZTm(){
sfDiv=ZTmCln('DIV','map')
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
document.onclick=call;

}
]]>
</script>
</head>
     <body onload="ZTm();"><![CDATA[<input type=button value=act>
<div class=map></div>
]]>
</body>
</html>
</ztmstudio>