Skip to content

Instantly share code, notes, and snippets.

Last active December 21, 2019 04:54
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save lukebiggerstaff/9ae4808aedca0d98fc98 to your computer and use it in GitHub Desktop.
Save lukebiggerstaff/9ae4808aedca0d98fc98 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"]
Copy link

Thank you so much.

Copy link

glad it helped!

Copy link

How can you add columns which are not coming from json object, for example, the action column which would contain the likes of edit and delete?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment