55 lines
1 KiB
HTML
Executable file
55 lines
1 KiB
HTML
Executable file
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.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}
|
||
];
|
||
|
||
var tmpl = document.getElementById('grid-template').innerHTML.trim();
|
||
tmpl = _.template(tmpl);
|
||
|
||
|
||
document.getElementById('grid-holder').innerHTML = tmpl({list: users});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|