JavaScript Table
Week 5 Hacks.
//Define data
function Person(name, role) {
this.name = name;
this.role = role;
}
Person.prototype.setRole = function(role) {
this.role = role;
}
Person.prototype.toJSON = function() {
const obj = {name: this.name, role:this.role};
const json = JSON.stringify(obj);
return json;
}
// Creating data and putting it into a list
var Tanay = new Person("Tanay", "Scrum Father");
var Yuri = new Person("Yuri", "DevOps");
var Harsha = new Person("Harsha", "Frontend Dev");
var Sachit = new Person("Sachit", "Backend Dev");
var Raunak = new Person("Raunak", "Backend Dev");
storedInfo = [Yuri, Tanay, Harsha, Sachit, Raunak];
//Make a object to hold the data
function infoStorage(storedInfo) {
this.storedInfo = storedInfo;
}
// Type Object that holds the data
infoHolder = new infoStorage(storedInfo);
//HTML conversion method
infoStorage.prototype._toHtml = function() {
var style = (
"display:inline-block;" +
"border: 2px solid grey;" +
"box-shadow: 0.8em 0.4em 0.4em grey;"
);
var table = "";
table += "<tr>";
table += "<th><mark>" + "Name" + "</mark></th>";
table += "<th><mark>" + "Role" + "</mark></th>";
table += "</tr>";
//Go through all data and each data's properties in a table format
for (var row of this.storedInfo) {
table += "<tr>";
table += "<td>" + row.name;
table += "<td>" + row.role + "</td>";
table += "<tr>"
}
//Return table
return (
"<div style='" + style + "'>" +
"<table>" +
table +
"</table>" +
"</div>"
);
};
// IJavaScript HTML processor receive parameter of defined HTML fragment
$$.html(infoHolder._toHtml());