jQuery Course Debug
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&pagename=CourseInfo2.js"></script>
<script id="studentTemplate" type="text/x-jquery-tmpl">
<tr>
<td><a href="mailto:${Email}">${LName + ", " + FName}</a></td>
<td>${PartnerNames}</td>
</tr>
</script>
<div id="mydiv">
<table>
<caption>Students and their Partners</caption>
<thead>
<tr>
<th>Name</th>
<th>Partners</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
// build a mapping from student ID => index into students array
var lookup={};
$.each(students,function(index,student){
lookup[student.ID]=index;
});
$.each(students,function(index,student){
//if (index == 10) return false;
var partnerIds = [];
partnerIds = student.Partners.split(',');
student.PartnerNames = '';
$.each(partnerIds, function(index, id) {
var partner=students[lookup[id]];
partnerName = partner.FName + ' ' + partner.LName
student.PartnerNames += partnerName + ', ';
});
$("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});
$("tr:odd").css("background-color", "#F7F9BC");