Beispiel:JS-Anwendung-Tabellen-dynamisch.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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:SELFHTML-Beispiel-Grundlayout.css" />  
  <style>
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>
  <title>Tabellen dynamisch erzeugen</title>
</head>
<body>
  <h1>Tabellen dynamisch erzeugen</h1>

  <main>
    <button id="ueber">Überschrift hinzufügen</button>
    <button id="zeile">Zeile hinzufügen</button>
    
    <table id="tabelle">
    </table>
    
  </main>
  
<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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-Anwendung-Tabellen-dynamisch.html&oldid=68094“