JSFiddle - React, Tailwind, and code Playground

by Sam Tyson

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>
  <script id="studentTemplate" type="text/x-jquery-tmpl"> 
   <tr>
    <td>${ID}</td>
    <td><a href="mailto:${Email}">${LName + ", " + FName}</a></td>
    <td>${Phone}</td>
    <td>${ Math.round((HW1 + HW2 + HW3 + HW4) / 4 ) }</td>
   </tr>
  </script>

<div id="mydiv">
  <table>
   <thead>
    <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Phone</th>
     <th>HW Avg</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;
}
th {
    background-color: #0080FF;
    color: white;
    font-weight: bold;
}

JavaScript

$.each(students,function(index,student){     
    if (index == 20 ) return false;
    $("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});
$("tr:odd").css("background-color", "#CAE4FF");