Beispiel:JS-Anwendung-Tabellen-dynamisch.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
button {
display: block; width: 12em;
}
table{
width: 28em; margin-top: 2em;
}
table,td, caption {
border: thin solid black; border-collapse: collapse;
padding: 0.4em; }
caption {
background: #666; color: #c4ced3; font-weight: bold;
}
</style>
<title>Tabellen dynamisch erzeugen</title>
</head> <body>
Tabellen dynamisch erzeugen
<button id="ueber">Überschrift hinzufügen</button> <button id="zeile">Zeile hinzufügen</button>
<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>
