Notes

<title>Details</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GeeksforGeeks CSS Media Query</title>
<meta name="description"content="CSS Media Query for all devices like mobile, tablet, desktop etc.">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="gfg-style.css">
<meta name ="viewport" content="width-device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--header part--->
<div class="gfg-div" >
<div style="margin: 20px;" class="d-flex flex-row justify-content-between">
<div>
<strong>
<select id="Details" style="background-color: rgb(241, 199, 8); padding: 10px; font-size:20px; border:0px; border-radius: 2px;"></select>
</strong>
</div>
<div>
<button class="btn btn-warning" onclick="getOption()" style=" padding: 10px;text-align: center; font-size:20px;"><strong>GetDetails</strong></button>
</div>
</div>
<p class="output"></p>
<!--table part--->
<table class="table table-striped">
<tr class="bg-danger">
<th data-column="name" data-order="desc">Name </th>
<th data-column="lastname" data-order="desc">Lastname </th>
<th data-column="employeeid" data-order="desc">Employeeid</th>
<th data-column="age" data-order="desc">Age </th>
<th data-column="DoB" data-order="desc" class=" hidden-xs">DoB </th>
</tr>
<tbody id="table"></tbody>
</table>
</div>
<!--Script-->
<script>
var myArray= [
{'name':'Vidyavathi', 'lastname':'Manupati','employeeid':'2074560','age':'22', 'DoB':'11/10/1989'},
{'name':'YaminiPriyanka','lastname':'Kakumanu','employeeid':'2074560', 'age':'21', 'DoB':'10/1/1989'},
{'name':'Dheeraj','lastname':'Chitakindi', 'employeeid':'2074610','age':'25', 'DoB':'10/14/1990'},
{'name':'Mohan','lastname':'Rapeti','employeeid':'2074558', 'age':'23', 'DoB':'11/29/1993'},
{'name':'Shravan','lastname':'Herekar','employeeid':'2074874', 'age':'40', 'DoB':'3/12/1991'},
{'name':'Vaishnavi','lastname':'S','employeeid':'2074560', 'age':'22', 'DoB':'10/31/1995'},
];
//-----GetOption-----
let l=myArray.length;
let select= document.getElementById("Details");
for(let i=0;i<l;i++)
{
var opt = document.createElement('option');
opt.innerHTML = myArray[i].name;
select.appendChild(opt);
}
function getOption(){
selectElement = document.querySelector('#Details');
output = selectElement.value;
var Table =document.getElementById('table');
for (var k=0;k<myArray.length;k++)
{
if(output === myArray[k].name){
var row =`<tr>
<td>${myArray[k].name}</td>
<td>${myArray[k].lastname}</td>
<td>${myArray[k].employeeid}</td>
<td>${myArray[k].age}</td>
<td class= "hidden-xs" >${myArray[k].DoB}</td>
</tr>`
//-----hiding part-----
Table.innerHTML = row;
}
}
}
//Sorting-Starts
$('th').on('click', function(){
var column = $(this).data('column')
var order = $(this).data('order')
var text = $(this).html()
text = text.substring(0, text.length - 1)
if(order == 'desc'){
$(this).data('order', "asc")
myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
text += '&#9660'
}else{
$(this).data('order', "desc")
myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
text += '&#9650'
}
$(this).html(text)
buildTable(myArray)
})
buildTable(myArray)
function buildTable(data){
var table = document.getElementById('table')
table.innerHTML = ''
for (var i = 0; i < data.length; i++){
var row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].lastname}</td>
<td>${data[i].employeeid}</td>
<td>${data[i].age}</td>
<td class="hidden-xs">${data[i].DoB}</td>
</tr>`
table.innerHTML += row
}
}
//showhideColumn
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var index = $(this).attr('name').substr(3);
index--;
$('table tr').each(function() {
$('td:eq(' + index + ')',this).toggle();
});
$('th.' + $(this).attr('name')).toggle();
});
});


</script>


* {
margin: 0;
padding: 0;
}
/* For Desktop View */
@media screen and (min-width: 1024px) {
.gfg-div {
color: #fff;
}
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
color: black;
}
}
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
color: black;
}
}
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 736px) and (min-device-width: 414px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
color: black;
}
}
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 812px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
color: black;
}
}