57 lines
1 KiB
HTML
Executable file
57 lines
1 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
|
||
<style>
|
||
table {
|
||
border-collapse: collapse;
|
||
}
|
||
td {
|
||
border: 1px solid gray;
|
||
padding: 2px 5px;
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="grid-holder"></div>
|
||
|
||
<script type="text/template" id="grid-template">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Имя</th><th>Возраст</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<% for(var i=0; i<list.length; i++) { %>
|
||
<tr><td><%=list[i].name%></td><td><%=list[i].age%></td></tr>
|
||
<% } %>
|
||
</tbody>
|
||
</table>
|
||
</script>
|
||
|
||
<script>
|
||
|
||
var users = [
|
||
{name: "Вася", age: 10},
|
||
{name: "Петя", age: 15},
|
||
{name: "Женя", age: 20},
|
||
{name: "Маша", age: 25},
|
||
{name: "Даша", age: 30}
|
||
];
|
||
|
||
$('#grid-holder').html(
|
||
_.template( $('#grid-template').html().trim(), {list: users})
|
||
);
|
||
|
||
|
||
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html>
|