Untitled
unknown
plain_text
3 years ago
10 kB
6
Indexable
var data = [
{
id: 1,
name: "Janu",
English: 50,
Maths: 86,
Science: 77,
SocialScience: 88
},
{
id: 2,
name: "Thanu",
English: 75,
Maths: 96,
Science: 67,
SocialScience: 91
},
{
id: 3,
name: "Tara",
English: 90,
Maths: 35,
Science: 86,
SocialScience: 100
},
{
id: 4,
name: "Glen",
English: 79,
Maths: 68,
Science: 77,
SocialScience: 78
},
{
id: 5,
name: "Zara",
English: 80,
Maths: 85,
Science: 96,
SocialScience: 68
}
]
function onPageLoad() {
// code goes here to display table on page loads
//alert("Hi");
var tblBody = document.getElementsByTagName('tbody')[0];
var table = document.getElementById("studentTable");
for (var i = 0; i < data.length; i++) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cellText = document.createTextNode(i+1);
var cell1 = document.createElement("td");
var cellText1 = document.createTextNode(data[i].name);
var cell2 = document.createElement("td");
var cellText2 = document.createTextNode(data[i].English);
var cell3 = document.createElement("td");
var cellText3 = document.createTextNode(data[i].Maths);
var cell4 = document.createElement("td");
var cellText4 = document.createTextNode(data[i].Science);
var cell5 = document.createElement("td");
var cellText5 = document.createTextNode(data[i].SocialScience);
cell.appendChild(cellText);
row.appendChild(cell);
cell1.appendChild(cellText1);
row.appendChild(cell1);
cell2.appendChild(cellText2);
row.appendChild(cell2);
cell3.appendChild(cellText3);
row.appendChild(cell3);
cell4.appendChild(cellText4);
row.appendChild(cell4);
cell5.appendChild(cellText5);
row.appendChild(cell5);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
table.appendChild(tblBody);
}
function filterBy() {
// code goes here to select filter by option
var ele = document.getElementsByName("mode");
var so;
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
so = ele[i].value;
}
if(so ==="between"){
document.getElementById("to").style = "display: inline";
document.getElementById("maxMark").style = "display: inline";
}
if(so === "below"){
document.getElementById("to").style = "display: none";
document.getElementById("maxMark").style = "display: none";
}
if(so === "above"){
document.getElementById("to").style = "display: none";
document.getElementById("maxMark").style = "display: none";
}
}
function Clear() {
// code goes here to clear filter
// document.getElementById("subjects").reset();
for(var i = document.getElementById("studentTable").rows.length; i > 1;i--)
{
document.getElementById("studentTable").deleteRow(i -1);
}
document.getElementsByName("mode")[0].checked = true;
document.getElementsByName("mode")[1].checked = false;
document.getElementsByName("mode")[2].checked = false;
document.getElementById("to").style = "display: none";
document.getElementById("maxMark").style = "display: none";
document.getElementById("mark").value = "";
document.getElementById("subjects").value = "";
onPageLoad();
}
function filterClick() {
// code goes here to handle filter button
//document.getElementById("studentData").clear();
for(var i = document.getElementById("studentTable").rows.length; i > 1;i--)
{
document.getElementById("studentTable").deleteRow(i -1);
}
var ele = document.getElementsByName("mode");
var mark = document.getElementById("mark").value;
var sub = document.getElementById("subjects").value;
var comp;
var so;
for(i = 0; i < ele.length; i++) {
if(ele[i].checked)
so = ele[i].value;
}
//alert();
if(sub === ''){
Clear()
}
else if(so === "above" && mark!=="" ){
var tblBody = document.getElementsByTagName('tbody')[0];
var table = document.getElementById("studentTable");
var j=1;
for (var i = 0; i < data.length; i++) {
if(sub === "English"){
comp = data[i].English;
}
if(sub === "Maths"){
comp = data[i].Maths;
}
if(sub === "Science"){
comp = data[i].Science;
}
if(sub === "SocialScience"){
comp = data[i].SocialScience;
}
if(comp>mark){
var row = document.createElement("tr");
var cell = document.createElement("td");
var cellText = document.createTextNode(j++);
var cell1 = document.createElement("td");
var cellText1 = document.createTextNode(data[i].name);
var cell2 = document.createElement("td");
var cellText2 = document.createTextNode(data[i].English);
var cell3 = document.createElement("td");
var cellText3 = document.createTextNode(data[i].Maths);
var cell4 = document.createElement("td");
var cellText4 = document.createTextNode(data[i].Science);
var cell5 = document.createElement("td");
var cellText5 = document.createTextNode(data[i].SocialScience);
cell.appendChild(cellText);
row.appendChild(cell);
cell1.appendChild(cellText1);
row.appendChild(cell1);
cell2.appendChild(cellText2);
row.appendChild(cell2);
cell3.appendChild(cellText3);
row.appendChild(cell3);
cell4.appendChild(cellText4);
row.appendChild(cell4);
cell5.appendChild(cellText5);
row.appendChild(cell5);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
table.appendChild(tblBody);
} }
else if(so === "below" && mark!==""){
var tblBody = document.getElementsByTagName('tbody')[0];
var table = document.getElementById("studentTable");
var j=1;
for (var i = 0; i < data.length; i++) {
if(sub === "English"){
comp = data[i].English;
}
if(sub === "Maths"){
comp = data[i].Maths;
}
if(sub === "Science"){
comp = data[i].Science;
}
if(sub === "SocialScience"){
comp = data[i].SocialScience;
}
if(comp<mark){
var row = document.createElement("tr");
var cell = document.createElement("td");
var cellText = document.createTextNode(j++);
var cell1 = document.createElement("td");
var cellText1 = document.createTextNode(data[i].name);
var cell2 = document.createElement("td");
var cellText2 = document.createTextNode(data[i].English);
var cell3 = document.createElement("td");
var cellText3 = document.createTextNode(data[i].Maths);
var cell4 = document.createElement("td");
var cellText4 = document.createTextNode(data[i].Science);
var cell5 = document.createElement("td");
var cellText5 = document.createTextNode(data[i].SocialScience);
cell.appendChild(cellText);
row.appendChild(cell);
cell1.appendChild(cellText1);
row.appendChild(cell1);
cell2.appendChild(cellText2);
row.appendChild(cell2);
cell3.appendChild(cellText3);
row.appendChild(cell3);
cell4.appendChild(cellText4);
row.appendChild(cell4);
cell5.appendChild(cellText5);
row.appendChild(cell5);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
table.appendChild(tblBody);
} }
else if(so === "between" && mark!==""){
var tblBody = document.getElementsByTagName('tbody')[0];
var table = document.getElementById("studentTable");
var max = document.getElementById("maxMark").value;
var j=1;
for (var i = 0; i < data.length; i++) {
if(sub === "English"){
comp = data[i].English;
}
if(sub === "Maths"){
comp = data[i].Maths;
}
if(sub === "Science"){
comp = data[i].Science;
}
if(sub === "SocialScience"){
comp = data[i].SocialScience;
}
if(comp<max && comp>mark){
var row = document.createElement("tr");
var cell = document.createElement("td");
var cellText = document.createTextNode(j++);
var cell1 = document.createElement("td");
var cellText1 = document.createTextNode(data[i].name);
var cell2 = document.createElement("td");
var cellText2 = document.createTextNode(data[i].English);
var cell3 = document.createElement("td");
var cellText3 = document.createTextNode(data[i].Maths);
var cell4 = document.createElement("td");
var cellText4 = document.createTextNode(data[i].Science);
var cell5 = document.createElement("td");
var cellText5 = document.createTextNode(data[i].SocialScience);
cell.appendChild(cellText);
row.appendChild(cell);
cell1.appendChild(cellText1);
row.appendChild(cell1);
cell2.appendChild(cellText2);
row.appendChild(cell2);
cell3.appendChild(cellText3);
row.appendChild(cell3);
cell4.appendChild(cellText4);
row.appendChild(cell4);
cell5.appendChild(cellText5);
row.appendChild(cell5);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
table.appendChild(tblBody);
} }
}