Skip to content

Instantly share code, notes, and snippets.

Forked from lukebiggerstaff/AJAXTable.js
Created June 15, 2018 21:01
Show Gist options
  • Save stefcab/b4b0f142083453c9b6e47f7cf4c1591e to your computer and use it in GitHub Desktop.
Save stefcab/b4b0f142083453c9b6e47f7cf4c1591e to your computer and use it in GitHub Desktop.
A script to create a mobile first responsive table using AJAX and vanilla javascript
<!DOCTYPE html>
<html lang="en">
<title>Creating a table using javascript and AJAX</title>
.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%;
<div class="wrapper">
<button id="button">Create Table!</button>
<script src="AJAXTable.js"></script>
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');
//Create first row with header and data
var tableRowFirst = document.createElement('tr');
var tableRowFirstHead = document.createElement('th');
for (i = 1; i < tableCellsPets.length; i++) {
//create new heading
var petData = document.createElement('td');
// append Heading to table
//set new heading text content to json information
petData.textContent = tableCellsPets[i];
var tableRowSecond = document.createElement('tr');
var tableRowSecondHead = document.createElement('th');
for (i = 1; i < tableCellsPets.length; i++) {
//create new heading
var peopleData = document.createElement('td');
// append Heading to table
//set new heading text content to json information
peopleData.textContent = tableCellsPeople[i];
// Add classes to elements
//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
//Append rows to new table
};"GET", "petsandpeople.json", true);
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"]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment