Untitled
unknown
plain_text
4 years ago
10 kB
9
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); } } }
Editor is loading...