abusedmedia/TableTop_example.html

## _Tabletop.md

      
    Raw
  

              _Tabletop.md
            
          
    Tabletop.js library example

Read data from Google SpreadSheed with few lines of code

  
## TableTop_example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="TableTop simple example" />
	<meta charset="utf-8">
	<title>Tabletop.js test</title>
  <script type="text/javascript" src="https://rawgithub.com/jsoma/tabletop/master/src/tabletop.js"></script>
</head>
<body>


	<p>NOTE: You must have singed-in with your Google account in order to let the tabletop works.</p>

  <div id="cont"></div>

</body>
</html>

## TableTop_example.js
window.onload = function(){

       var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html';

      Tabletop.init({
        key: public_spreadsheet_url,
        callback: showInfo,
        simpleSheet: true
      });


      function showInfo(data){
        console.log(data);

        var cont = document.getElementById('cont');

        for(var i=0; i<data.length; ++i){
           cont.insertAdjacentHTML('beforebegin', '<p>'+data[i].category+'</p>');
        }

      }

};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="description" content="TableTop simple example" />
	<meta charset="utf-8">
	<title>Tabletop.js test</title>
	<script type="text/javascript" src="https://rawgithub.com/jsoma/tabletop/master/src/tabletop.js"></script>
	</head>
	<body>



	<p>NOTE: You must have singed-in with your Google account in order to let the tabletop works.</p>

	<div id="cont"></div>

	</body>
	</html>
	window.onload = function(){

	var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AmYzu_s7QHsmdDNZUzRlYldnWTZCLXdrMXlYQzVxSFE&output=html';

	Tabletop.init({
	key: public_spreadsheet_url,
	callback: showInfo,
	simpleSheet: true
	});


	function showInfo(data){
	console.log(data);

	var cont = document.getElementById('cont');

	for(var i=0; i<data.length; ++i){
	cont.insertAdjacentHTML('beforebegin', '<p>'+data[i].category+'</p>');
	}

	}

	};