JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<p>Datum:</p>
<input type="text" id="datum" name="datum" title="Datum" style="color:#888;" placeholder="TT:MM:JJ" required><br><br>
 
<p>Uhrzeit:</p>
<input type="text" id="zeit" name="zeit" title="Uhrzeit" style="color:#888;" placeholder="SS:MM" required><br><br>
<button onclick="submit()">Hinzufügen</button><br><br>
<button onclick="loeschen()">Delete</button><br><br>
 
<table>
    <tbody id="table">
        <tr>
            <th>Datum:</th>
            <th>Zeit:</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

<script>
i = 1;
var obergrenze = document.getElementById('table').childElementCount;

function submit() {
   if (document.getElementById('datum').value === "" || document.getElementById('zeit').value === "") {
      alert("Alle Felder ausfüllen!");
   } else {
      i++;
      var datumValue = document.getElementById('datum').value;
      var zeitValue = document.getElementById('zeit').value;
      document.querySelector("#table > tr:nth-child(" + i + ") > td:first-child").innerHTML = datumValue;
      document.querySelector("#table > tr:nth-child(" + i + ") > td:last-child").innerHTML = zeitValue;
      document.querySelector("#datum").value = "";
      document.querySelector("#zeit").value = "";
      
      if(i >= obergrenze) {
      	var row = document.getElementById('table').insertRow();
        row.insertCell(0);
        row.insertCell(1);
      }
   }
}

function loeschen() {
	if(i < obergrenze) {
  	document.querySelector("#table > tr:nth-child(" + i + ") > td:first-child").innerHTML = "";
    document.querySelector("#table > tr:nth-child(" + i + ") > td:last-child").innerHTML = "";
    i--;
  } else {
  	document.querySelector("#table > tr:nth-child(" + i + ")").remove();
 ...

CSS

h1 {
text-align: center;
}
body { 
font-family: Helvetica, Arial, Geneva, sans-serif;
}
table {
border-collapse: collapse;
width: 17%;
}
th {
height: 20px;
}
td {
height: 10px;
vertical-align: bottom;
}

table, th, td {
border: 2px solid black;
padding: 3px;
text-align: left;
}