-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrender_template.html
72 lines (64 loc) · 2.37 KB
/
render_template.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html5>
<html>
<head>
<title>Test template</title>
<script src="render_template.js"></script>
<style>
.mytable tr:nth-child(even) {
background-color: #ccc;
}
#tbl2 {
font-style: italic;
}
</style>
</head>
<body>
<div style="display:none">
<table data-return="table" id="tmpl-table" class="mytable" data-arguments="name, count">
<tr><th data-return="num">#</th><th>random1</th><th>random2</th></tr>
<tr data-for="var i = 0; i < count; i++">
<td data-return="nnn">N${i}</td>
<td>${name} ${col()}</td>
<td>${Math.round(Math.random() * 100)}</td>
</tr>
</table>
<li id="tmpl-li" data-return="li" data-for="var i = 0; i < 10; i++">${Math.random()}</li>
</div>
<div id="container1"></div>
<div id="container2"></div>
<ol id="container3"></ol>
<script>
function rndCol(el) {
var r = Math.round(Math.random() * 9.9);
var g = Math.round(Math.random() * 9.9);
var b = Math.round(Math.random() * 9.9);
var c = r.toString() + g.toString() + b.toString();
el.setAttribute("style", "color:#" + c);
}
function col() {
var x = Math.random();
var node = document.createElement("span");
node.appendChild(document.createTextNode(x.toString()));
if (x > 0.8) {
node.setAttribute("style", "color:red");
} else if (x > 0.5) {
node.setAttribute("style", "color:yellow");
} else {
node.setAttribute("style", "color:green");
}
return node;
}
renderTemplate("#container1", "#tmpl-table", "First", 3);
var x = renderTemplate("#container2", "#tmpl-table", "Second", 13);
x.table.setAttribute("id", "tbl2");
x.num.setAttribute("style", "color:red");
for (var i = 0; i < x.nnn.length; i++) {
rndCol(x.nnn[i]);
}
var l = renderTemplate("#container3", "#tmpl-li");
for (var i = 0; i < l.li.length; i++) {
rndCol(l.li[i]);
}
</script>
</body>
</html>