Notes

let students=[
{
"STUDENT NAME":"John",
"RANK":"4",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
{
"STUDENT NAME":"Allen",
"RANK":"3",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
{
"STUDENT NAME":"Catherine",
"RANK":"1",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
{
"STUDENT NAME":"Bruce",
"RANK":"2",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
{
"STUDENT NAME":"Jack",
"RANK":"2",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
{
"STUDENT NAME":"Victoria",
"RANK":"2",
"PERFORMANCE LEVEL":"45% Below-Level",
"MID 1 SCORE OUT OF 600":"286",
"MID 2 SCORE OUT OF 600":"250",
"FINAL SCORE OUT OF 600":"312"
},
];
const table=document.querySelector('table');
function loadElements(){
constructTable();
loadForm();
}
function constructTable(){
const thead=document.createElement('thead')
let tr=document.createElement('tr');
for(let key in students[0]){
let th=document.createElement('th');
th.innerHTML=key;
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
constructTbody();
}
function constructTbody(stds=students){
stds=students
let oldtbody=table.querySelector('tbody');
table.removeChild(oldtbody);
const tbody=document.createElement('tbody');
for(let i=0;i<stds.length;i++){
let rowdata=stds[i]
let tr=document.createElement('tr');
for(key in rowdata){
let td=document.createElement('td');
td.innerHTML=rowdata[key];
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody)
}
// function toggleTable(){
// let select=document.querySelector('select');
// let valueSelected=select.value;
// if(valueSelected==="All"){
// constructTbody();
// }
// else{
// for(let i=0;i<students.length;i++){
// if(valueSelected===students[i]["STUDENT NAME"]){
// let emp=[]
// emp.push(students[i])
// constructTbody(emp);
// }
// }
// }
// }
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.querySelector("select");
filter = input.value.toUpperCase();
table = document.querySelector("table");
tr = table.getElementsByTagName("tr");

// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1 || filter==="ALL") {
tr[i].style.display = "";
}else {
tr[i].style.display = "none";
}
}
}
}
function loadForm(){
let select=document.querySelector('select');
for(let i=0;i<students.length;i++){
let stdname=students[i]["STUDENT NAME"];
let option=document.createElement('option');
option.innerHTML=stdname;
option.setAttribute("value",stdname)
select.appendChild(option);
}
}
// function loadPerformance(){
// let select2=document.getElementById('performance');
// for(let i=0;i<students.length;i++){
// let performance=students[i]["PERFORMANCE LEVEL"];
// let options=document.createElement('option');
// options.innerHTML=performance;
// options.setAttribute("value",performance)
// select2.appendChild(options);
// }
// }
function sort() {
var n=0;
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;

var table = document.querySelector("table");
switching = true;
dir = "asc";
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("td")[n];
y = rows[i + 1].getElementsByTagName("td")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}}
function PrintDocument(btn) {
$(btn).show();
$("#excelDataTable th:last-child").show();
$("#excelDataTable td:last-child").show();
}
function hideDocument(btn) {
$(btn).show();
$("#excelDataTable th:last-child").hide();
$("#excelDataTable td:last-child").hide();
}