javascript-learning/tabletop.html at master · CooperUnion/javascript-learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
	<head>
		<title>Google Spreadsheet JSON Example</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
		<script>
			$(document).ready(function(){

				  var public_spreadsheet_url = '1M8cXgKOUCOhJp8V_b4Dfd_U_VBhLJpcFLpgfktLY7cw';

				  var getData = function () {
				    Tabletop.init({
				    	"key": public_spreadsheet_url,
				        "callback": function(data){
				        	console.log(data);
				        	for(var i=0; i<data.length; i++) {

				        		if(i==0) {
				        			$("body").addClass(data[i].animals);
				        		}

				        		$("body").append(data[i].animals + " ");

				        	}
				        },
				        "simpleSheet": true
				    });
				  }

				  getData();


			});
		</script>
		<style>
		.dogs {
			background-color:green;
		}

		.cats {
			background-color:orange;
		}

		</style>

	</head>
	<body>
	</body>
</html>