basti1012.bplaced.net

Ich soll für der Schule eine Tabelle erstellen. Der Harken an der Sache ist das sie durch Javascript und einer Schleife gefüllt werden soll. Es darf keine fertige aus Codepen sein, wo td,Inhalt td,td,Inhalt,td, u.s.w im HTML Teil schon steht. Sie muss komplett durch Javascript erstellt werden. Ich bekomme es nicht hin HILFE Bitte.

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>