Skip to content

Instantly share code, notes, and snippets.

@lukebiggerstaff
Last active December 21, 2019 04:54
Show Gist options
  • 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">
<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"]
}
@minyehtut
Copy link

Thank you so much.

@lukebiggerstaff
Copy link
Author

glad it helped!

@niomwungeri-fabrice
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