basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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.

    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>