Textfelder in Tabelle übertragen!
Hallo und Guten Tag
Ich bin gerade wieder bei mir mit HTML auseinander zu setzen, nur ich habe da jetzt ein kleines Problem, ich werde durch ein IT-Praktikum gebeten eine kleine Seite wo sich die Mitarbeiter eintragen können. Diese Informationen sollen durch Knopfdruck in eine darunterliegende Tabelle eingefügt werden, ich schaue jetzt schon mehrere Stunden aber finde bisher keinerlei Lösung. Ich hoffe, ich könnt mir helfen, ich bin sehr stark am Verzweifeln.
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<style>
th{
background:grey;
border:1px solid black;
}
td{
border:1px solid black;
height:30px;
}
table{
width:70vw;
margin:0 auto;
border-collapse:collapse;
border:1px solid black;
}
.formular{
text-align:center;
width:100%;
margin:10px 0 30px 0;
}
#info{
display:none;
width:100%;
background:red;
color:white;
height:20px;
}
</style>
</head>
<body>
<div class="formular">
<label>Name</label>
<input type="text" id="name">
<label>Nachname</label>
<input type="text" id="nachname">
<button>Eintragen</button>
</div>
<div id="info"></div>
<table>
<tr>
<th>Name</th>
<th>Nachname</th>
</tr>
<tbody>
</tbody>
</table>
<script>
var inf=document.getElementById('info');
function los(){
let name=document.getElementById('name').value;
let nachname=document.getElementById('nachname').value;
if(name=='' || nachname==''){
inf.innerHTML='Bitte beide Felder ausfüllen';
aus(inf,2000)
}else{
document.getElementsByTagName('tbody')[0].innerHTML+='<tr><td>'+name+'</td><td>'+nachname+'</td></tr>';
}
}
document.getElementsByTagName('button')[0].addEventListener('click' ,los);
function aus(was,time){
was.style.display='block';
setTimeout(function(){
was.style.display='none';
},time);
}
</script>
</body>
</html>