lukebiggerstaff/AJAXTable.js

## ajaxTable.html
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Creating a table using javascript and AJAX</title>
	<style>
	.wrapper {
		text-align: center;
	}
	.jsTable * {
		border: 3px solid black;
		text-align: center;
		padding: 0;
	}
	.jsTable {
		width: 95%;
		margin: 10px auto;
	}
	.jsTableHead {
		font-weight: bold;
		font-size: 24px;
		background-color: lightgrey;
	}
	.jsTableRowHead {
		font-size: 18px;
		background: lightgrey;
	}

	@media (min-width: 470px) {
		.jsTable {
			width: 85%;
		}
	}

	@media (min-width: 640px) {
		.jsTable {
			width: 65%;
		}
	}

	</style>
</head>

<body>

<div class="wrapper">
	<button id="button">Create Table!</button>
</div>

<script src="AJAXTable.js"></script>

</body>
</html>

## AJAXTable.js
var getTableDataAJAX = function() {

	var getTableData = new XMLHttpRequest();

	getTableData.onreadystatechange = function() {
		if(getTableData.readyState === 4) {
			var tableInfo     = JSON.parse(getTableData.responseText);
			var tableHeading  = tableInfo.tableHeading;
			var tableCellsPets   = tableInfo.tableCellsPets;
			var tableCellsPeople   = tableInfo.tableCellsPeople;

			var createTable = function() {
				//Create Table and Heading Rows
				var newTable = document.createElement('table');
				var tableHeadingRow = document.createElement('tr');
				var tableHeader = document.createElement('th');
				tableHeadingRow.appendChild(tableHeader);

				//Create first row with header and data
				var tableRowFirst = document.createElement('tr');
				var tableRowFirstHead = document.createElement('th');
				tableRowFirst.appendChild(tableRowFirstHead);

				for (i = 1; i < tableCellsPets.length; i++) {
					//create new heading
					var petData = document.createElement('td');

					// append Heading to table
					tableRowFirst.appendChild(petData);

					//set new heading text content to json information
					petData.textContent = tableCellsPets[i];
				};

				var tableRowSecond = document.createElement('tr');
				var tableRowSecondHead = document.createElement('th');
				tableRowSecond.appendChild(tableRowSecondHead);

				for (i = 1; i < tableCellsPets.length; i++) {
					//create new heading
					var peopleData = document.createElement('td');

					// append Heading to table
					tableRowSecond.appendChild(peopleData);

					//set new heading text content to json information
					peopleData.textContent = tableCellsPeople[i];
				};

				// Add classes to elements
				newTable.classList.add('jsTable');
				tableHeader.classList.add('jsTableHead');
				tableRowFirstHead.classList.add('jsTableRowHead');
				tableRowSecondHead.classList.add('jsTableRowHead');

				//Add text content and colspan attribute to tableHeader
				tableHeader.textContent = tableHeading;
				tableHeader.setAttribute("colspan", "4");

				//Add text content to row headings
				tableRowFirstHead.textContent = tableCellsPets[0]
				tableRowSecondHead.textContent = tableCellsPeople[0];

				//Append table to DOM
				document.body.appendChild(newTable);

				//Append rows to new table
				newTable.appendChild(tableHeadingRow);
				newTable.appendChild(tableRowFirst);
				newTable.appendChild(tableRowSecond);
			}();
		};
	};
	getTableData.open("GET", "petsandpeople.json", true);
	getTableData.send();
};

var wrapperDiv = document.querySelector('div');
var AJAXbutton = document.getElementById('button');

AJAXbutton.addEventListener('click', getTableDataAJAX);

## petsandpeople.json
{
	"tableHeading"     : "Table with Pet and People Names!",
	"tableCellsPets"   : ["Pet Names", "Sparky", "Roxy", "Cat Meowington"],
 	"tableCellsPeople" : ["People Names", "Larry", "Julie", "Joel"]
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Creating a table using javascript and AJAX</title>
	<style>
	.wrapper {
	text-align: center;
	}
	.jsTable * {
	border: 3px solid black;
	text-align: center;
	padding: 0;
	}
	.jsTable {
	width: 95%;
	margin: 10px auto;
	}
	.jsTableHead {
	font-weight: bold;
	font-size: 24px;
	background-color: lightgrey;
	}
	.jsTableRowHead {
	font-size: 18px;
	background: lightgrey;
	}

	@media (min-width: 470px) {
	.jsTable {
	width: 85%;
	}
	}

	@media (min-width: 640px) {
	.jsTable {
	width: 65%;
	}
	}

	</style>
	</head>

	<body>

	<div class="wrapper">
	<button id="button">Create Table!</button>
	</div>

	<script src="AJAXTable.js"></script>

	</body>
	</html>
	var getTableDataAJAX = function() {

	var getTableData = new XMLHttpRequest();

	getTableData.onreadystatechange = function() {
	if(getTableData.readyState === 4) {
	var tableInfo = JSON.parse(getTableData.responseText);
	var tableHeading = tableInfo.tableHeading;
	var tableCellsPets = tableInfo.tableCellsPets;
	var tableCellsPeople = tableInfo.tableCellsPeople;

	var createTable = function() {
	//Create Table and Heading Rows
	var newTable = document.createElement('table');
	var tableHeadingRow = document.createElement('tr');
	var tableHeader = document.createElement('th');
	tableHeadingRow.appendChild(tableHeader);

	//Create first row with header and data
	var tableRowFirst = document.createElement('tr');
	var tableRowFirstHead = document.createElement('th');
	tableRowFirst.appendChild(tableRowFirstHead);

	for (i = 1; i < tableCellsPets.length; i++) {
	//create new heading
	var petData = document.createElement('td');

	// append Heading to table
	tableRowFirst.appendChild(petData);

	//set new heading text content to json information
	petData.textContent = tableCellsPets[i];
	};

	var tableRowSecond = document.createElement('tr');
	var tableRowSecondHead = document.createElement('th');
	tableRowSecond.appendChild(tableRowSecondHead);

	for (i = 1; i < tableCellsPets.length; i++) {
	//create new heading
	var peopleData = document.createElement('td');

	// append Heading to table
	tableRowSecond.appendChild(peopleData);

	//set new heading text content to json information
	peopleData.textContent = tableCellsPeople[i];
	};

	// Add classes to elements
	newTable.classList.add('jsTable');
	tableHeader.classList.add('jsTableHead');
	tableRowFirstHead.classList.add('jsTableRowHead');
	tableRowSecondHead.classList.add('jsTableRowHead');

	//Add text content and colspan attribute to tableHeader
	tableHeader.textContent = tableHeading;
	tableHeader.setAttribute("colspan", "4");

	//Add text content to row headings
	tableRowFirstHead.textContent = tableCellsPets[0]
	tableRowSecondHead.textContent = tableCellsPeople[0];

	//Append table to DOM
	document.body.appendChild(newTable);

	//Append rows to new table
	newTable.appendChild(tableHeadingRow);
	newTable.appendChild(tableRowFirst);
	newTable.appendChild(tableRowSecond);
	}();
	};
	};
	getTableData.open("GET", "petsandpeople.json", true);
	getTableData.send();
	};

	var wrapperDiv = document.querySelector('div');
	var AJAXbutton = document.getElementById('button');

	AJAXbutton.addEventListener('click', getTableDataAJAX);
	{
	"tableHeading" : "Table with Pet and People Names!",
	"tableCellsPets" : ["Pet Names", "Sparky", "Roxy", "Cat Meowington"],
	"tableCellsPeople" : ["People Names", "Larry", "Julie", "Joel"]
	}