Tabelle mit Schleifen erzeugen
Im Rahmen einer Fortbildung bin ich auf die folgende Aufgabe gestoßen, die mich an meine Grenzen bringt, da mir selbst der Ansatz zur möglichen Lösung fehlt.
Ich möchte die angehängte Tabelle erstellen. Dabei soll die Tabellenüberschrift mit einer Schleife erstellt werden und der Rest kann mit zwei ineinander verschachtelten Schleifen erzeugt werden.
Der hier verwendete Code
<style>
table{
width:100%;
height:100%;
background:yellow;
border:1px solid black;
}
tr:not(:before){
width:95%;
height:25px;
background:red;
border:1px solid red;
}
tr:nth-of-type(even) {
background:#ccc;
}
tr:before{
display:block;
background:green;
height:29px;
line-height:30px;
content:attr(title);
}
table:before{
content:'-';
background:green;
height:30px;
display:block;
}
th{
width:25%;
height:25px;
background:green;
border:1px solid black;
}
td{
width:25%;
height:25px;
background:green;
border:1px solid black;
}
</style>
<div id="content">
</div>
<script>
var ele = document.getElementById('content');
var table1 = document.createElement('table');
table1.id="Tableid";
table1.class="tabellentable";
ele.appendChild(table1);
for(u=0;u< 4;u++){
var th1 = document.createElement("th");
th1.id='th1';
th1.innerHTML='title '+u+'';
th1.class="Title ";
table1.appendChild(th1)
}
for(a=0;a< 10;a++){
var tr1 = document.createElement('tr');
tr1.id='tr'+a+'';
tr1.class="trclass";
tr1.title=a+1;
table1.appendChild(tr1);
var td = document.createElement('td');
for (var i = 0; i < 4; i++) {
var td1 = document.createElement("td");
td1.id='td'+i+a+'';
td1.innerHTML='td'+i+a+'';
td1.class="tdclass";
tr1.appendChild(td1)
}
}
</script>