JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script id="usertmpl" type="text/x-jquery-tmpl">
        <table class="table table-user-information" id="approveScroll" style="height: 100px;">
            <tbody>
                <tr>
                    <td>
                        <span><i class="glyphicon glyphicon-user"  data-toggle="tooltip" data-original-title="approved by"></i> ${UserName}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approvedDate"><i class="glyphicon glyphicon-time" data-toggle="tooltip" data-original-title="approved date"></i> ${EnteredDate}</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span id="approveComment"><i class="glyphicon glyphicon-comment" data-toggle="tooltip" data-original-title="comment"></i> ${Comment}</span>
                    </td>
                </tr>
            </tbody>
        </table>
    </script>

<div id="results"></div>

JavaScript

var json={
     "msg": {
         "d": [
             {"UserName": "user1", "EnteredDate": "2014-12-01", "Comment": "comment-1"},
    {"UserName": "user2", "EnteredDate": "2014-12-02", "Comment": "comment-2"}
         ]
     }
 } 
$.each(json.msg.d, function(index, item) {
    console.log(item);
      $('#usertmpl').tmpl(item).appendTo('#results');
  });
$('i[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});