wdzajicek/sheetsToTable.html

## sheetsToTable.html
<!doctype html>
<!-- Automatically create a table, formated w/ thead & tbody, from a Google Sheet -->
<!-- Based from Gist: https://gist.github.com/terrywbrady/a03b25fe42959b304b1e#file-googlespreadsheet-html -->
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
  var spData = null; // Set to null in-case the data is not there
  function doData(json) { // There's a callback on this function ( 'https://...&callback=doData' ) the end of the spreadsheet URL inside a script tag in the page
      spData = json.feed.entry; // Set it to the json feed of the sheet
  }

  function drawCell(tr, val) {
    var td = document.createElement('td'); // Create an empty <td></td> element
    tr.append(td);
    td.append(val);
    return td;
  }
  function drawTh(tr, val) {
    var th = document.createElement('th'); // Create an empty <td></td> element
    tr.append(th);
    th.append(val);
    return th;
  }
  function drawHeadRow(table, rowData) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
    var tr = document.createElement('tr');
	  table.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawCell(tr, rowData[c]);
	  }
	  return tr;
  }
  function drawBodyRow(tbody, rowData) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
    var tr = document.createElement('tr');
	  tbody.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawCell(tr, rowData[c]);
	  }
	  return tr;
  }
  function drawHeadRow(thead, rowData) {
	  if (rowData == null) return null;
	  if (rowData.length == 0) return null;
    var tr = document.createElement('tr');
	  thead.append(tr);
	  for(var c=0; c<rowData.length; c++) {
		  drawTh(tr, rowData[c]);
	  }
	  return tr;
  }

  function drawTable(parent) {
    var table = document.createElement("table");
	  parent.append(table);
	  return table;
  }
  function drawHead(table) {
    var thead = document.createElement('thead');
	  table.append(thead);
	  return thead;
  }
  function drawBody(table) {
    var tbody = document.createElement('tbody');
	  table.append(tbody);
	  return tbody;
  }

  function readData(parent) {
      var data = spData;
      var table = drawTable(parent);
      var thead = drawHead(table);
      var tbody = drawBody(table);
      var rowData = [];

      for(var r=0; r<data.length; r++) {
          var cell = data[r]["gs$cell"];
          var val = cell["$t"];
          if ( cell.row == 1 ) {
            if ( cell.col == 1 ) {
              drawHeadRow(thead, rowData);
              rowData = [];
            }
          } else {
            if ( cell.col == 1 ) {
              drawBodyRow(tbody, rowData);
              rowData = [];
            }
          }
          rowData.push(val);
      }
      drawHeadRow(thead, rowData);
      drawBodyRow(tbody, rowData);
  }
    document.addEventListener('DOMContentLoaded', function() {
      readData(document.querySelector('#data'));
  });
  </script>
<script src="https://spreadsheets.google.com/feeds/cells/14pczY6IjNEy3zdqyNRhCZFLfWLEP4Uv3EGwIp7uXrLo/1/public/values?alt=json-in-script&callback=doData"></script>
<style type="text/css">
  table {border-collapse: collapse; width: 100%;}
  th, td {border: thin solid black; padding: 3px;}
  tr.head th, tr.head td {background-color: #EDEDED; border-bottom: 4px double black;}
  span.linetitle {font-weight: bold;}
  div.lineclass {font-style: italic;}
  .title, .result {width: 80%;}
  .notes {width: 15%;}
  h1 {text-align: center;}
  body {margin: 12px; font-size: 12px;}
</style>
<style type="text/css" media="print">
  form {display: none;}
</style>
</head>
<body>
<h1>Parse Google Spreadsheet with JavaScript</h1>
<div id="data"></div>
</body>
</html>
	<!doctype html>
	<!-- Automatically create a table, formated w/ thead & tbody, from a Google Sheet -->
	<!-- Based from Gist: https://gist.github.com/terrywbrady/a03b25fe42959b304b1e#file-googlespreadsheet-html -->
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
	<script type="text/javascript">
	var spData = null; // Set to null in-case the data is not there
	function doData(json) { // There's a callback on this function ( 'https://...&callback=doData' ) the end of the spreadsheet URL inside a script tag in the page
	spData = json.feed.entry; // Set it to the json feed of the sheet
	}

	function drawCell(tr, val) {
	var td = document.createElement('td'); // Create an empty <td></td> element
	tr.append(td);
	td.append(val);
	return td;
	}
	function drawTh(tr, val) {
	var th = document.createElement('th'); // Create an empty <td></td> element
	tr.append(th);
	th.append(val);
	return th;
	}
	function drawHeadRow(table, rowData) {
	if (rowData == null) return null;
	if (rowData.length == 0) return null;
	var tr = document.createElement('tr');
	table.append(tr);
	for(var c=0; c<rowData.length; c++) {
	drawCell(tr, rowData[c]);
	}
	return tr;
	}
	function drawBodyRow(tbody, rowData) {
	if (rowData == null) return null;
	if (rowData.length == 0) return null;
	var tr = document.createElement('tr');
	tbody.append(tr);
	for(var c=0; c<rowData.length; c++) {
	drawCell(tr, rowData[c]);
	}
	return tr;
	}
	function drawHeadRow(thead, rowData) {
	if (rowData == null) return null;
	if (rowData.length == 0) return null;
	var tr = document.createElement('tr');
	thead.append(tr);
	for(var c=0; c<rowData.length; c++) {
	drawTh(tr, rowData[c]);
	}
	return tr;
	}

	function drawTable(parent) {
	var table = document.createElement("table");
	parent.append(table);
	return table;
	}
	function drawHead(table) {
	var thead = document.createElement('thead');
	table.append(thead);
	return thead;
	}
	function drawBody(table) {
	var tbody = document.createElement('tbody');
	table.append(tbody);
	return tbody;
	}

	function readData(parent) {
	var data = spData;
	var table = drawTable(parent);
	var thead = drawHead(table);
	var tbody = drawBody(table);
	var rowData = [];

	for(var r=0; r<data.length; r++) {
	var cell = data[r]["gs$cell"];
	var val = cell["$t"];
	if ( cell.row == 1 ) {
	if ( cell.col == 1 ) {
	drawHeadRow(thead, rowData);
	rowData = [];
	}
	} else {
	if ( cell.col == 1 ) {
	drawBodyRow(tbody, rowData);
	rowData = [];
	}
	}
	rowData.push(val);
	}
	drawHeadRow(thead, rowData);
	drawBodyRow(tbody, rowData);
	}
	document.addEventListener('DOMContentLoaded', function() {
	readData(document.querySelector('#data'));
	});
	</script>
	<script src="https://spreadsheets.google.com/feeds/cells/14pczY6IjNEy3zdqyNRhCZFLfWLEP4Uv3EGwIp7uXrLo/1/public/values?alt=json-in-script&callback=doData"></script>
	<style type="text/css">
	table {border-collapse: collapse; width: 100%;}
	th, td {border: thin solid black; padding: 3px;}
	tr.head th, tr.head td {background-color: #EDEDED; border-bottom: 4px double black;}
	span.linetitle {font-weight: bold;}
	div.lineclass {font-style: italic;}
	.title, .result {width: 80%;}
	.notes {width: 15%;}
	h1 {text-align: center;}
	body {margin: 12px; font-size: 12px;}
	</style>
	<style type="text/css" media="print">
	form {display: none;}
	</style>
	</head>
	<body>
	<h1>Parse Google Spreadsheet with JavaScript</h1>
	<div id="data"></div>
	</body>
	</html>