Assignment 2

Assignment 2

by dandiebolt

HTML

<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=CourseInfo.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
  <script id="studentTemplate" type="text/x-jquery-tmpl"> 
   <tr>
    <td>${FName + " " + LName}</td>
    <td>${State}</td>
       {{each Quizzes}}
           <td>${$value}</td>
       {{/each}}
    <td>${Math.round((Quizzes[0]+Quizzes[1]+Quizzes[2]+Quizzes[3])/4)}</td>
    <td>${average2}</td>
    <td>${average3(Quizzes)}</td>
   </tr>
  </script>

<input type="button" id="hide" value="Hide TX" /><br/><br/>

<div id="mydiv">
  <table>
   <caption></caption>
   <thead>
    <tr>
     <th>Name</th>
     <th>State</th>
     <th>Quiz #1</th>
     <th>Quiz #2</th>
     <th>Quiz #3</th>
     <th>Quiz #4</th>
     <th>Avg1</th>
     <th>Avg2</th>
     <th>Avg3</th>
    </tr>
   </thead>
   <tbody id="studentInfo">
   </tbody>
  </table>
</div>

CSS

body {
    font-size: 12px;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 5px;
}

JavaScript

$.each(students,function(index,student){     
    if (index == 10 ) {return false};
    student.average2=Math.round((student.Quizzes[0]+student.Quizzes[1]+
                                 student.Quizzes[2]+student.Quizzes[3])/4);
    
    student.average3=function (arr) {
        var sum = 0;
        for (var i = 0, j = arr.length; i < j; i++) {
            sum += arr[i];
        }
        return Math.round(sum / arr.length);
    }
        
    $("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});

$("#hide").click(function(){
    alert("watch row containing TX disapear");
    $("tr:has(td:contains('TX'))").fadeOut(function(){
        alert("now fix the zebra striping");
        var visiblerows=$("tr:visible");
        visiblerows.filter(":odd").css("background-color","#F7F9BC");
        visiblerows.filter(":even").css("background-color", "#FFFFFF");
    });
});
                
$("tr:first").css({"background-color":"#CCCCCC","font-size":"150%"});
$("tr:odd").css("background-color", "#F7F9BC");