jQuery Course Example

by dandiebolt

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}<br/>${Fax}</td>
    <td><a href="http://maps.google.com/maps?q=${Lat},${Lon}(${City},+${State})" target="_blank">(${Lat} , ${Lon})</a></td>
   </tr>
  </script>

<div id="mydiv">
  <table>
   <caption></caption>
   <thead>
    <tr>
     <th>ID</th>
     <th>Name</th>
     <th>Phone / Fax</th>
     <th>(Lat , Lon)</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 == 5 ) return false;
    $("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});
$("tr:odd").css("background-color", "#F7F9BC");