Skip to content

Instantly share code, notes, and snippets.

@asterion

asterion/index.html

Created April 27, 2017 21:10
Show Gist options
  • Save asterion/4de852b89b6a65aae56ee6270b12f899 to your computer and use it in GitHub Desktop.
Save asterion/4de852b89b6a65aae56ee6270b12f899 to your computer and use it in GitHub Desktop.
Download ZIP
HTML+js+css
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabla</title>
<style media="screen">
.color0{ background-color: #ddd; }
.color1{ background-color: teal; }
.color2{ background-color: green; }
.color3{ background-color: gold; }
.color4{ background-color: peru; }
.color5{ background-color: #ccc; }
</style>
</head>
<body>
<table id="mitabla">
<thead>
<tr>
<th>name</th>
<th>color</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function classCssName(id) {
var name = '';
switch (id) {
case 0:
name = 'color0';
break;
case 1:
name = 'color1';
break;
case 2:
name = 'color2';
break;
case 3:
name = 'color3';
break;
case 4:
name = 'color4';
break;
default:
name = 'color5';
break;
}
return name;
}
var data = [
{name: 'zero', color: 0},
{name: 'one', color: 1},
{name: 'dos', color: 2},
{name: 'tres', color: 3},
{name: 'four', color: 4},
{name: 'five', color: 5},
{name: 'six', color: 6},
];
for (var i = 0; i < data.length; i++) {
tr = document.createElement("TR");
tr.className = classCssName(data[i].color);
td = document.createElement("TD");
td.appendChild(document.createTextNode(data[i].name));
tr.appendChild(td);
td = document.createElement("TD");
td.appendChild(document.createTextNode(data[i].color));
tr.appendChild(td);
document.getElementById("mitabla").appendChild(tr);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment