JSFiddle - React, Tailwind, and code Playground
by Blueprinter
HTML
<div style="color:#808000; text-align:center; font-family:Times New Roman; font-size:50px; background-color:#66CDAA;">My Listings!</div>
<button id="myButton" onclick="onGotListings()" style="margin: 2% 5px 5px 5px">Get My Listings</button>
<table id="myTable">
<thead>
<tr>
<th>Month</th>
<th>Make</th>
<th>Price</th>
<th>Type</th>
<th>Description</th>
<th>Function</th>
<th>Looks</th>
<th>Something</th>
</tr>
</thead>
<tbody id="tblRows">
<tr></tr>
</tbody>
</table>
CSS
#myTable td, th {
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
color:#000000;
}
#myTable td {
background-color:#EAF2D3;
}
#myTable th {
background-color:#9999FF;
}
JavaScript
alert("Hah! It Ran!");
var rtrnTheData = [{
ad: "Car",
ac: 39500,
af: "4",
ah: "klgjoirt3904d",
ab: "Acura",
ae: "2013 ACURA MDX 3.5L V6 AWD 6AT (294 HP)",
ag: "Mint",
aa: "Option2"
}, {
ad: "Truck",
ac: 6799,
af: "3",
ah: "ldkfldfjljKey",
ab: "GMC",
ae: "1/2 Ton with plow",
ag: "Mint Looks",
aa: "Option1"
}];
//console.log(rtrnTheData);
//console.log(rtrnTheData.length);
//console.log(rtrnTheData[0]);
var subArray = new Object();
subArray = [];
var table = document.getElementById("tblRows");
table.innerHTML = "";
for (var i = 0; i < rtrnTheData.length; i++) {
subArray = rtrnTheData[i];
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
cell1.innerHTML = subArray.aa;
cell2.innerHTML = subArray.ab;
cell3.innerHTML = subArray.ac;
cell4.innerHTML = subArray.ad;
cell5.innerHTML = subArray.ae;
cell6.innerHTML = subArray.af;
cell7.innerHTML = subArray.ag;
cell8.innerHTML = subArray.ah;
};