My two cents to jQuery Nano Templates

This is derived from the original work by Tomasz Mazur and Jacek Becela: https://github.com/trix/nano

HTML

<!DOCTYPE HTML>
<html>
<head>
<script type="text/html" id="prova">
<tr class="{gender}">
                <td>{firstName}</td>
                <td>{lastName}</td>
                <td>{gender}</td>
                <td>{phone.pre}.{phone.num}</td>
            </tr>
</script>
</head>
<body>
    <p>'Click' events on rows write messages to Firebug console. You may want to first open Firebug then refresh the browser in case you don't see them.</p>
    <br><br>
    <table id="contacts">
        <thead>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Gender</th>
            <th>Phone Number</th>
        </thead>
        <tbody>
            <!-- Template Fragments -->
            
        </tbody>
    </table>
</body>
</html>

CSS

body {
    padding: 10px;
    font-family: Arial;
    font-size: 9pt;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid black;
    display: none
}

thead th {
    background-color: darkblue;
    color: white;
    text-align: left;
    padding: 5px;
}

td {
    padding: 5px;
    cursor: pointer;
}

tr:nth-child(odd) {
    background-color: #fdfdfd;
}

tr:nth-child(even) {
    background-color: #dedede;
}

tr.Male:hover {
    background-color: blue;
    color: white;
}
tr.Female:hover {
    background-color: pink;
    color: blue;
}

JavaScript

/* Nano Templates (Tomasz Mazur, Jacek Becela) */
/* @see https://github.com/trix/nano */
(function($){
  $.nano = function(template, data) {
    return template.replace(/\{([\w\.]*)\}/g, function (str, key) {
      var keys = key.split("."), value = data[keys.shift()];
      $.each(keys, function () { value = value[this]; });
      return (value === null || value === undefined) ? "" : value;
    });
  };
  /* Seven lines of additional code to Nano Templates (Terry Young) */
  $.fn.outerHTML = function () { return $(this).wrapAll('<div />').parent().html(); };
  $.template = function($template, oData) { return $($.nano($template.outerHTML(), oData)); };
  $.populate = function($template, arrData) {
      var $elems = $();
      $.each(arrData, function(i, obj) {$elems = $elems.add($.template($template, obj).data('data', obj));});
      return $elems;
  };    
})(jQuery);


/*
 * In the above, what $.populate does, is it first creates an empty jQuery object collection,
 * then while iterating through the data, it creates a template instance,
 * attaches it with the entire data object instaces, then gets added to the collection.
 * Rule of thumb is to avoid DOM manipulation inside a loop. Hence the "collection" approach.
 * Then finally, append the entire collection to the DOM.
 */



/* ---------------------------------------------------
 * Example
 */
$(document).ready(function () {
    
    var $contacts = $('#contacts'),
        $template = $("#prova")[0].innerHTML, // detach the Template Fragment from DOM for reuse
        $contactList = $contacts.find('tbody'),
        
        // assuming this data is actually a result from an Ajax request
        data = {
            contacts: [
                {firstName: 'John', lastName: 'Johnson', gender: 'Male', phone: {pre: '06', num:'1234 5678'}}
                ,{firstName: 'Peter', lastName: 'Peterson', gender: 'Male', phone: {pre: '06', num:'1234 5678'}}
                ,{firstName: 'Patty', lastName: 'Patterson',...