JSFiddle - React, Tailwind, and code Playground

by wdstillman

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
This table puts the header row at the bottom
<p><br>
<table>
    <tr><th>Name</th><th>Phone</th></tr>
    <div id='tmpInDiv'></div>
</table>
<hr>
This one works fine
<p><br>
<table>
    <tr><th>Name</th><th>Phone</th></tr>
    <tbody id='tmpInTable'></tbody>
</table>

CSS

th {font-weight:bold}

JavaScript

$(function() { 
    var strData = '[{"firstname":"Dave","lastname":"Stillman","phone":"555-1212","address":"555 1212 Road, Nampa, ID"},{"firstname":"Donald","lastname":"Trump","phone":"555-5512","address":"255 Somewhere Lane, New York NY"}]'; 
    var data = eval("(" + strData + ")"); 
    var template = "<tr><td>${firstname},${lastname}</td><td>${phone}</td></tr>";
    $.tmpl(template,data).appendTo("#tmpInDiv"); 
    $.tmpl(template,data).appendTo("#tmpInTable"); 
});