<!DOCTYPE html> <html : Notes

</head>
<body>



<div class="container">

<h1>Employee List</h1>
<div class="select" style="width: 200px;">
<select id="sel" onchange="clicked(this)" >
<option value="101">-- Select --</option>
</select>
</div>

<br>
<span class="getButton">
<button onclick="convertJsontoHtmlTable()">Get</button>
</span>
<br />

<div class="slider">
<div id="empDivCont"></div>
<button class="slide" id="theButton" onclick="hideThis()">></button>
</div>

</div>

<script src="script.js"></script>

</body>
</html>

js file
let employess = [
{
id: 1,
Name: "John",
Age: 25,
Role: "Developer",
Experience: 3,
Location: "Bangalore",
salary: "4,00,000"
},
{
id: 2,
Name: "John Abraham",
Age: 30,
Role: "Tester",
Experience: 7,
Location: "Chennai",
salary: "4,00,000"
},
{
id: 3,
Name: "Mike",
Age: 30,
Role: "Cloud Engineer",
Experience: 2,
Location: "Hyderabad",
salary: "4,00,000"
},
{
id: 4,
Name: "Alexa",
Age: 35,
Role: "Security specialst",
Experience: 3,
Location: "Bangalore",
salary: "4,00,000"

},
{
id: 5,
Name: "Geek",
Age: 35,
Role: "Developer",
Experience: 13,
Location: "Kolkata",
salary: "4,00,000"
},
{
id: 6,
Name: "Yammie",
Age: 25,
Role: "Developer",
Experience: 5,
Location: "Mumbai",
salary: "4,00,000"
},
{
id: 7,
Name: "Lens",
Age: 20,
Role: "Tester",
Experience: 1,
Location: "Mumbai",
salary: "4,00,000"
},
{
id: 8,
Name: "Ria",
Age: 27,
Role: "Hr department",
Experience: 3,
Location: "Pune",
salary: "4,00,000"
},
{
id: 9,
Name: "Tessa",
Age: 31,
Role: "Cloud Engineer",
Experience: 4,
Location: "Noida",
salary: "4,00,000"
},
];

//variable to store the selcted value
var selected = 0;

// inserting options into select block
var ele = document.getElementById("sel");
ele.innerHTML = ele.innerHTML + '<option value="' + 0 + '">' + "All" + "</option>";

for (var i = 0; i < employess.length; i++) {
ele.innerHTML = ele.innerHTML + '<option value="' + employess[i]["id"] + '">' + employess[i]["Name"] + "</option>";
}

// function to store the selected value
function clicked(ele) {
selected = ele.value;
}

//creating intial table

//Getting value for table header

var tablecolumns = [];
for (var i = 0; i < employess.length; i++) {
for (var key in employess[i]) {
if (tablecolumns.indexOf(key) === -1) {
tablecolumns.push(key);
}
}
}
function dynamicsort(property, order) {
var sort_order = 1;
if (order === "desc") {
sort_order = -1;
}
return function (a, b) {
// a should come before b in the sorted order
if (a[property] < b[property]) {
return -1 * sort_order;
// a should come after b in the sorted order
} else if (a[property] > b[property]) {
return 1 * sort_order;
// a and b are the same
} else {
return 0 * sort_order;
}
}
}

function buildtable(data) {
for (var i = 0; i < data.length; i++) {
tableemployee.deleteRow(1);

tr = tableemployee.insertRow(-1);

for (var j = 0; j < tablecolumns.length; j++) {
var tabCell = tr.insertCell(-1);
if (j > 4) {
tabCell.classList.add('hidden');
tabCell.setAttribute('id', 'thh' + i + j);

}
tabCell.innerHTML = data[i][tablecolumns[j]];
}
}

//intially sending the main tabe to the viewport
var employeedivcontainer = document.getElementById("empDivCont");
employeedivcontainer.innerHTML = "";
employeedivcontainer.appendChild(tableemployee);

}
var order = true;
function sortclicked(parameter) {
let tempOrder;
if (order) {
tempOrder = 'asc';
} else {
tempOrder = 'desc';
}
var data = employess.sort(dynamicsort(parameter, tempOrder));
buildtable(data);
order = !order;
}

//Creating html table and adding class to it
// the whole table will be inside tableeemployee
var tableemployee = document.createElement("table");

//second table contains only selected row !
var tableemployee2 = document.createElement("table");

//Creating header of the HTML table using tr
var tr = tableemployee.insertRow(-1);
// tr.addEventListener('click', sortclicked());
tr.onclick = function (e) {
e = e || window.event;
var th = e.target || e.srcElement; //assumes there are no other elements in the th
console.log(th.innerHTML);
sortclicked(th.innerHTML);
}

for (var i = 0; i < tablecolumns.length; i++) {
//header
var th = document.createElement("th");
// th.setAttribute('onclick', sortclicked());

if (i > 4) {
th.classList.add('hidden');
th.setAttribute('id', 'th' + i);
}
th.innerHTML = tablecolumns[i];
tr.appendChild(th);
}

// cloning the already created header and adding the same into second table

var tr2 = tr.cloneNode(true);
tableemployee2.appendChild(tr2);

// adding header to both tables ended

// adding all rows to the main table

for (var i = 0; i < employess.length; i++) {
tr = tableemployee.insertRow(-1);

for (var j = 0; j < tablecolumns.length; j++) {
var tabCell = tr.insertCell(-1);
if (j > 4) {
tabCell.classList.add('hidden');
tabCell.setAttribute('id', 'thh' + i + j);

}
tabCell.innerHTML = employess[i][tablecolumns[j]];
}
}

//intially sending the main tabe to the viewport
var employeedivcontainer = document.getElementById("empDivCont");
employeedivcontainer.innerHTML = "";
employeedivcontainer.appendChild(tableemployee);

//dummy row inserted into the table to be replaced with the selected one
var dummy = tableemployee2.insertRow(-1);

//the function
//convertJsontoHtmlTable();
function convertJsontoHtmlTable() {

if (selected.toString() === "0") {

// if the selected value is ALL then sending the main table into viewport

var employeedivcontainer = document.getElementById("empDivCont");
employeedivcontainer.innerHTML = "";
employeedivcontainer.appendChild(tableemployee);
} else {

//deleting the row which is already present

tableemployee2.deleteRow(-1);

//inserting the selected row into the table
tr = tableemployee2.insertRow(-1);
for (var j = 0; j < tablecolumns.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = employess[selected - 1][tablecolumns[j]];
}

//inserting the table into the viewport
var employeedivcontainer = document.getElementById("empDivCont");
employeedivcontainer.innerHTML = "";
employeedivcontainer.appendChild(tableemployee2);
}

}
var temp = true;
function hideThis() {
for (var i = 5; i < tablecolumns.length; i++) {
var th = document.getElementById("th" + i);
if (temp) {
th.classList.remove('hidden');
let z = document.getElementById('theButton');
z.innerHTML = "<";
} else {
th.classList.add('hidden');
let z = document.getElementById('theButton');
z.innerHTML = ">";
}
}
for (var i = 0; i < employess.length; i++) {
for (var j = 5; j < tablecolumns.length; j++) {
var tabCell = document.getElementById('thh' + i + j);
if (temp) {
tabCell.classList.remove('hidden');
} else {
tabCell.classList.add('hidden');
}
}
}
temp = !temp;
}

css file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding challange</title>
<link href='styles.css' rel="stylesheet"></link>
</head>
<body>



<div class="container">

<h1>Employee List</h1>
<div class="select" style="width: 200px;">
<select id="sel" onchange="clicked(this)" >
<option value="101">-- Select --</option>
</select>
</div>

<br>
<span class="getButton">
<button onclick="convertJsontoHtmlTable()">Get</button>
</span>
<br />

<div class="slider">
<div id="empDivCont"></div>
<button class="slide" id="theButton" onclick="hideThis()">></button>
</div>

</div>

<script src="script.js"></script>

</body>
</html>

what is notes.io

Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...

With notes.io;

* You can take a note from anywhere and any device with internet connection.
* You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
* You can quickly share your contents without website, blog and e-mail.
* You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
* Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 12 years and has been free since the day it was started.

You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;

Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio

Regards;
Notes.io Team

	Shortened Note Link

Long File

For written notes was greater than 18KB Unable to shorten.

To be smaller than 18KB, please organize your notes, or sign in.