// http://pure.github.io/pure/libs/pure.min.js
var aData = [],
Directives = {
'.jsRow': {
'elem<-Data': {
'@id+': 'elem.id'
,'@class+': function (el) { return (el.pos % 2) ? ' pair' : ' odd' }
, '.jsDateInsert': function () { //'elem.InsertDate'
var _d = new Date(this.dateInsert).toString(), _hh, _mm, _AMPM = ' AM', _p;
_p = _d.indexOf(':');
_hh = Number(_d.substring(_p - 2, _p));
_mm = _d.substring(_p + 1, _p + 3);
if (_hh > 12) {
_AMPM = ' PM';
_hh -= 12;
}
return _d.substring(4, 16) + _hh + ':' + _mm + _AMPM;
}
, '.jsBand': 'elem.band'
, '.jsAlbum': 'elem.album'
, '.jsLnkInfo@href': 'elem.linkInfo'
}
}
};
function Rec (pId, pBand, pAlbum, pDateInsert, pLinkInfo) {
return {id : pId, band: pBand, album: pAlbum, dateInsert: pDateInsert, linkInfo: pLinkInfo }
}
aData.push(new Rec(1, 'The Rolling Stones', 'Exile on Main Street', 1427370701031, 'http://www.therollingstones.com'));
aData.push(new Rec(2, 'The Who', 'Quadrophenia', 1427370700031, 'http://en.wikipedia.org/wiki/The_Who'));
aData.push(new Rec(3, 'The Doors', 'Waiting for the sun', 1427370601031, 'http://es.wikipedia.org/wiki/The_Doors'));
aData.push(new Rec(4, 'King Crimson', 'Starless & Bible Black', 1427370501031, 'http://www.dgmlive.com'));
var tmplHandle = function (pTmplId, pTarget, pData, pDirectives, pReplace, pWhere) {
var _$jq = $('.jsTmpls ' + pTmplId).eq(0).clone(), _where = pWhere || 'append';
_$jq = (pDirectives) ? _$jq.render(pData, pDirectives) : _$jq.autoRender(pData);
if (pReplace && $.trim($(pTarget).html())) { $(pTarget).empty(); }
if (parseFloat($.fn.jquery) > 1.3) _$jq = _$jq.children().unwrap();
(pWhere == "prepend") ? _$jq.prependTo(pTarget) : _$jq.appendTo(pTarget);
};
tmplHandle('.jsTmplRows', '.jsList', {Data: aData}, Directives, 1);
<table class="jsList" border="1" cellspacing="0" cellpadding="2">
</table>
<div class="jsTmpls" style="display:none">
<table class="jsTmplRows">
<tr class="jsRow" id="row">
<td class="jsBand"></td>
<td class="jsAlbum"></td>
<td class="jsDateInsert"></td>
<td><a href="#" class="jsLnkInfo">More info</a></td>
</tr>
</table>
</div>
.pair { background-color: lightcyan }
.odd {background-color: lightgray }
External resources loaded into this fiddle: