html knowhow

Infobox öffnen

interaktive Kommunikation mit einer Datenbank

So sieht´s aus

Tabellen dynamisch erzeugen

Quellcode

<html>
<head>

<style type="text/css">
button {display: block; width: 12em;}
table{ width: 450px; margin-top: 2em;}
table,td, caption { border: 1px solid black; border-collapse: collapse; padding: 0.4em;}
caption {background: #666; color: #c4ced3; font-weight: bold;}
</style>
</head>

<body>
<h1>Tabellen dynamisch erzeugen</h1>
<button id="ueber">Überschrift hinzufügen</button>
<button id="zeile">Zeile hinzufügen</button>
<table id="tabelle"></table>
<script>
document.getElementById('ueber')
.addEventListener('click', ueberschriftEinfuegen);
document.getElementById('zeile')
.addEventListener('click', zeileEinfuegen);
function ueberschriftEinfuegen () {
const tabelle = document.getElementById('tabelle');
// schreibe Tabellenüberschrift
const caption = tabelle.createCaption();
caption.innerHTML = 'Überschrift';
}
function zeileEinfuegen () {
const tabelle = document.getElementById('tabelle');
// schreibe Tabellenzeile
const reihe = tabelle.insertRow(0);
for (var i = 0; i < 7; i++) {
let inhalt = 'Zelle ' + (i+1),
zelle = reihe.insertCell();
zelle.innerHTML = inhalt;
}
}
</script>

</body>

</html>

Kontakt Datenschutz Impressum