Untitled

mail@pastecode.io avatar
unknown
plain_text
2 years ago
10 kB
3
Indexable
Never
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);
        
      } }
      
}