Notes

<title>Details</title>
<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">
<div class="d-flex flex-row justify-content-between">
<div>
<select id="emp" style="margin-left: 500px; height: 30px;"></select>
</div>
<div>
<button onclick="getOption()" style="height:25px;background-color: blueviolet;">Get</button>
<p class="output"></p>
</div>
</div>
<div>
<p><button onclick="sortTable()"><strong>SORT</strong></button></p>

</div>
<table class="table table-striped">
<tr class="bg-warning">
<th data-column="name" data-order="desc">Name </th>
<th data-column="age" data-order="desc">Age </th>
<th data-column="birthdate" data-order="desc" class="hidden-xs hidden-sm">Birthday </th>
<th data-column="clicking" data-order="desc"><a onclick="myFunction()" class="hidden-xl hidden-md hidden-lg hidden-sm display-xs" style="float: right;">&rarr;=></a></th>
</tr>
<tbody id="table"></tbody>
</table>
<script>
var myArray= [
{'name':'Vidyavathi', 'age':'22', 'birthdate':'11/10/1989'},
{'name':'YaminiPriyanka', 'age':'21', 'birthdate':'10/1/1989'},
{'name':'Dheeraj', 'age':'25', 'birthdate':'10/14/1990'},
{'name':'Mohan', 'age':'23', 'birthdate':'11/29/1993'},
{'name':'Shravan', 'age':'40', 'birthdate':'3/12/1991'},
{'name':'Vaishnavi', 'age':'22', 'birthdate':'10/31/1995'},
];
let l=myArray.length;
let select= document.getElementById("emp");
for(let i=0;i<l;i++)
{
var opt = document.createElement('option');
opt.innerHTML = myArray[i].name;
select.appendChild(opt);
}
buildTable(myArray)
function buildTable(data){
var Table = document.getElementById('table');
for(var j=0;j<data.length;j++){
var row = `<tr>
<td>${data[j].name}</td>
<td>${data[j].age}</td>
<td class="hidden-xs hidden-sm">${data[j].birthdate}</td>
</tr>`
Table.innerHTML += row;
}
}
function getOption(){
selectElement = document.querySelector('#emp');
output = selectElement.value;
document.querySelector('.output').textContent= output;
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].age}</td>
<td class="hidden-xs hidden-sm">${myArray[k].birthdate}</td>
</tr>`
Table.innerHTML = row;
}
}
}
// $('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].age}</td>
// <td>${data[i].birthdate}</td>
// </tr>`
// table.innerHTML += row
// }
// }



function myFunction(){
buildTable(myArray)
function buildTable(data){
var Table = document.getElementById('table');
for(var j=0;j<data.length;j++){
var row = `<tr>
<td hidden-xl hidden-md hidden-lg hidden-sm ">${data[j].birthdate}</td>
</tr>`
Table.innerHTML += row;
}
}
}
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("table");
switching = true;
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 0; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}

</script>