Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@minyehtut minyehtut commented Mar 29, 2017

Thank you so much.

@lukebiggerstaff

This comment has been minimized.

Copy link
Owner Author

@lukebiggerstaff lukebiggerstaff commented Jun 8, 2017

glad it helped!

@niomwungeri-fabrice

This comment has been minimized.

Copy link

@niomwungeri-fabrice niomwungeri-fabrice commented Dec 10, 2018

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