<style> table { border: 1px solid black; } table td { border: 1px solid black; padding: 3px; width:100px; } table th { border: 1px solid black; padding: 3px } </style> <button id="klick">klick</button> <script> spalten=5; zeilen=10; f=0; document.getElementById('klick').addEventListener('click',function(){ f++; if(f%2){ var body= document.getElementsByTagName("body")[0]; var table= document.createElement("table"); body.appendChild(table); var thead= document.createElement("thead"); table.appendChild(thead); var trth= document.createElement("tr"); thead.appendChild(trth); for(p=0;p<=spalten;p++){ var th = document.createElement("th"); th.className="thclass"; th.id="tr"+p; th.innerHTML='über'+p; thead.appendChild(th); } var tbody= document.createElement("tbody"); table.appendChild(tbody); for(p=0;p<=zeilen;p++){ var tr = document.createElement("tr"); tr.className="trclass"; tr.id="tr"+p; tbody.appendChild(tr); for(g=0;g<=spalten;g++){ var td = document.createElement("td"); td.className="tdclass"; td.id='td'+g; var min = 1; var max = 50; var x = Math.round(Math.random() * (max - min)) + min; td.innerHTML=x; tr.appendChild(td); } } }else{ document.getElementsByTagName('table')[0].remove(); } }); </script>