JSFiddle - React, Tailwind, and code Playground

by scrawlon

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="https://www.quickbase.com/db/bfx7sqpm8?a=dbpage&amp;pagename=CourseInfo.js"></script>
<html>
<head>
</head>
<body> 

<script id="studentTemplate" type="text/x-jquery-tmpl"> 
   <tr>
    <td>${LName}, ${FName}</td>
    <td id='grade'>${Grade}</td>   
    <td>${HW1},${HW2},${HW3},${HW4}</a></td>
    <td>${Quizzes}</td>   
   </tr>
  </script>

<h1>jQuery Grade Book</h1>
<div id="mydiv">
  <table class="sortable">
   <caption>click name header to alphabetize (again to reverse alphabetize)</caption>
   <thead>
    <tr>
     <th id="clickit" class="clickable"><a href="#" class="link-sort-table asc">Name: (alpabetize)</a></th>
     <th>Grade</th>
     <th>Homework / 25%</th>
     <th>Quizzes / 75%</th>   
    </tr>
   </thead>
   <tbody id="studentInfo">
   </tbody>
  </table>
</div>

</body>
</html>

CSS

body {
    font-size: 12px;
}

h1 {
    font-size: 22px;
    margin-bottom: 5px;
}

table {
    background-color: white;
    width: 400px;
    margin-top: 10px;    
}

th, td {
    border: 2px solid #FFFFFF;
    padding: 3px 3px 3px 8px;
}
th {
    background-color: #1199AA;
    color: white;
}

td.hovered {
    background-color: #FFFF00;
}        

clickable {
    background-color: #AA0000;
}    

th.clickable a{
   display: block;
   text-decoration: none;
   color: white; 
}

#clickit:hover{
    background-color: #444400;
}

.odd {
    background-color: #F0FF8F;
}

JavaScript

// sortable table
$.each(students,function(index,student){     
    if (index == 15 ) return false;
    
    // find grades: based on rules posted at
    // http://www.ehow.com/how_7905084_calculate-grades-based-percentages.html
      var hwTotal=([student.HW1 + student.HW2 + student.HW3 + student.HW4]/4)*.25;
      var quizTotal=0;
      $.each(student.Quizzes, function(index, value) { 
  quizTotal += value; 
});
      var qzTotal = ((quizTotal/4)*.75);
      var grade=Math.round(hwTotal+qzTotal);
    
      var ltrGrade="";
      student.Grade="";
    if (grade >= 90) {
        ltrGrade="A"
    } else if (grade < 90 && grade >= 80) {
        ltrGrade="B"
    } else if (grade < 80 && grade >= 70) {
        ltrGrade="C"
    } else if (grade < 70 && grade >= 60) {
        ltrGrade="D"
    } else {
        ltrGrade="F"
    };
    student.Grade=ltrGrade; 
    $("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});

// zebra highlight
$("tr:odd").css("backgroundColor", "#33DFFF");

// hover highlight
$('#studentInfo tr').hover(function(){  
    $(this).find('#grade').addClass('hovered');  
}, function(){  
    $(this).find('#grade').removeClass('hovered');  
}); 

// alphabetize by last name
// adapted from code at:
// http://www.designchemical.com/blog/index.php/jquery/sort-items-alphabetically-using-jquery/
$('.link-sort-table').click(function(e) {
    var $sort = this;
    var $table = $('.sortable');
    var $rows = $('tbody > tr',$table);
    $rows.sort(function(a, b){
        var keyA = $('td:eq(0)',a).text();
        var keyB = $('td:eq(0)',b).text();
        if($($sort).hasClass('asc')){
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA < keyB) ? 1 : 0;
        }
    });
    $.each($rows, function(index, row){
        $table.append(row);$("a").toggleClass("asc");
    });
    e.preventDefault();

// zebra highlight
$("tr").css("backgroundColor", "#FFFFFF");
$("tr:odd").css("backgroundColor", "#33DFFF");
  
});