demo.html
<!DOCTYPE html>
<html>
<head>
<title>UnderScoreJs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="underscore.js"></script>
<style type="text/css">
*{
font-size: 15px;
font-family: arial;
}
table{
border-collapse: collapse;
border: 1px solid #ccc;
width: 500px;
float: left;
margin-left: 20px;
}
table tr{
}
table th,td{
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table id="tbl_first">
<thead>
<tr>
<th>#</th>
<th>NAME</th>
<th>POST</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
jQuery(document).ready(function() {
var table='',obj_data = [
{'id':'101','name':'Shyam Kishor','post':'Developer'},
{'id':'102','name':'Sanjay Kumar','post':'Jonior Developer'},
{'id':'103','name':'Prakash Kiran','post':'Director'},
{'id':'104','name':'Amir Prasad','post':'Designer'},
{'id':'105','name':'Lokesh Kumar','post':'Programmer'}
];
_.each(obj_data,function(x){
table+='<tr><td>'+x.id+'</td><td>'+x.name+'</td><td>'+x.post+'</td></tr>';
});
$('#tbl_first tbody').html(table);
});
</script>
</body>
</html>
-----------------------------------------------------
DEMO:
0 comments:
Post a Comment