Simple Student Templating 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>
<div id="mydiv">
</div>

CSS

body {
    font-size: 12px;
}

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

th, td {
    padding:5px;
}

JavaScript

var student;
var markup="";

markup += '  <table id="mytable">';
markup += '   <thead>';
markup += '    <tr>';
markup += '     <th>ID</th>';
markup += '     <th>Name</th>';
markup += '     <th>Phone/Fax</th>';
markup += '     <th>(Lat / Lon)</th>';
markup += '    </tr>';
markup += '   </thead>';
markup += '   <tbody id="studentInfo">';

for (var index=0; index<students.length; index++) {
    if (index == 5) break; 
    student=students[index];  
    markup += '<tr>';
    markup += '<td>' + student["ID"] + '</td>';
    markup += '<td><a href="mailto:' + student["Email"] + '">' + 
        student["LName"] + ', ' + student["FName"] + '</a></td>';
    markup += '<td>' + student["Phone"] + '<br/>' + student["Fax"] +  '</td>';
    markup += '<td>(' + student["Lat"] + ' , ' + student["Lon"] + ')</td>';
    markup += '</tr>';
}

markup += '   </tbody>';
markup += '  </table>';

//document.getElementsByTagName("iframe")[0].document.getElementByID("mydiv").innerHTML(markup);