48 lines
1 KiB
HTML
48 lines
1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Issue #611-2d</title>
|
|
<script>
|
|
// Data is hard-coded here, but could come from the server
|
|
var data = [
|
|
{ name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
|
|
{ name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
|
|
];
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var template = document.querySelector('#row');
|
|
for (var i = 0; i < data.length; i += 1) {
|
|
var cat = data[i];
|
|
var clone = template.content.cloneNode(true);
|
|
var cells = clone.querySelectorAll('td');
|
|
cells[0].textContent = cat.name;
|
|
cells[1].textContent = cat.color;
|
|
cells[2].textContent = cat.sex;
|
|
cells[3].textContent = cat.legs;
|
|
template.parentNode.appendChild(clone);
|
|
}
|
|
</script>
|
|
<template id="row">
|
|
<tr>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</template>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Color</th>
|
|
<th>Sex</th>
|
|
<th>Legs</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</body>
|
|
</html>
|