Formular mit Button in Tabelle einfügen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Hi!

Ich bin noch sehr unerfahren, was die Internet-Programmierung angeht und bin somit bloß Anfänger.
Ich kenne mich mit HTML und CSS aus. Bisher habe ich bloß einige Tabellen gestaltet. Auch arrays habe ich schon angefangen, d.h. arrays in Tabllen eingefügt (mit PHP).

Nun mein Problem: Ich habe vor eine Tabelle für Arbeitszeiten zu machen. Meine Idee ist es nun zwei Eingabefelder zu machen, welche einmal für das Datum und einmal für die Uhrzeit sind. Auf Knopfdruck dann soll die Eingabe automatisch in die Tabelle sortiert werden. Ich habe schon Mal das Optische gemacht (siehe Screenshot). Den Java-Script habe ich aus dem Internet kopiert (=D).

Tabelle.png

Bitte nur ausführliche und verständliche Antworten (mit Quellcode!).

PS: Wenn ihr Dinge habt die man weglassen oder verbessern kann, könnt ihr mir das gerne schreiben! =)

Mein Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
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;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test xD</title>
</head>
<body>
<?php
echo "Datum: ". date('d.m.Y'). "<br><br>";
?>
<p>Datum:</p>
<input type="text" name="datum" title="Datum:" style="color:#888;"
value="TT:MM:JJ" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>

<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<p>Uhrzeit:</p>
<input type="text" name="zeit" title="Uhrzeit:" style="color:#888;"
value="SS:MM" onfocus="inputFocus(this)" onblur="inputBlur(this)" /><br><br>
<button type="submit" name="action" value="1">Hinzufügen</button><br><br>

<script>
function inputFocus(i){
if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}
</script>
<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>
</table>
</body>
</html>
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
63
18
Na dann mach ich mir mal die Mühe:
Beim HTML-Code nur leichte Änderungen.
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 type="submit" name="action" onclick="submit()">Hinzufügen</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>

<p id="demo"></p>

Hier dein Javascript-Code.
Code:
    i = 1;
    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, #zeit").value = "";
        }
    }

So nun zu deiner ausführlichen Erklärung:
Fangen wir doch einfach mal mit der if-Abfrage an.
Die ist eigentlich nur dafür da, um zu checken, ob beide Felder ausgefüllt wurden. Wenn ja, dann wird der else-Befehl ausgeführt.

Als erstes wird die Variable i um 1 erhöht. Beim ersten Klick ist sie also auf 2 hochgesetzt.

Dann werden die Values der beiden Inputs in Variablen gespeichert:
Code:
var datumValue = document.getElementById('datum').value;
var zeitValue = document.getElementById('zeit').value;
Dann wird mittels CSS-Selektor der erste nth-child mit der Value i und das darauf folgende first-child ausgewählt, also die erste Tabellenzeile, die Linke Zelle.

Das gleiche nochmal für die Rechte Zelle.

Diese bekommen dann jeweils das Value des inputs.

Als kleines extra wird die Value der inputs dann wieder gecleart.


Wenn ich nun erneut raufklicke, erhöht sich i erneut um 1 und es wird die nächste Tabellenzeile ausgewählt.
 
Reactions: cfs525

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Vielen Dank, ist quasi eine Schleife die automatisch in die nächste Zeile springt?
 

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Ich will ja nicht wieder nerven, aber hättest du vielleicht auch noch eine Idee, wie man die letzte Zeile löscht (Mit nem löschen Button) oder wenn alle Zeilen voll sind, dass auotmatisch eine neue hinzugefügt wird. Außerdem würde ich die Datei gerne hosten (also als localhost), aber wenn ich die Datei neu aufrufe, nachdem ich was in die Tabelle eingetragen habe, ist alles wieder weg (Logischerweise). Gäbe es da auch eine Möglichkeit, dass die Tabelle so bleibt?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
63
18
aber wenn ich die Datei neu aufrufe, nachdem ich was in die Tabelle eingetragen habe, ist alles wieder weg (Logischerweise). Gäbe es da auch eine Möglichkeit, dass die Tabelle so bleibt?
Meine Empfehlung ist eine Datenbank (MySQL und so weiter), sprich also PHP. Da gibt's 1000 Turotials im Internet zu.

Zu der anderen Frage:
Wie man Tabellenzeilen entfernen, beziehungsweise hinzufügen kann, kannst du einfach Googlen. Zur Not helfe ich dir auch bei. Doch um deine Grauen Zellen nochmal anzustrengen:
Wie könnte man denn theoretisch überprüfen, ob die maximal-Anzahl der Zeilen erreicht ist und er eine neue hinzufügen muss?
Kleiner Tipp, es hat was mit unserer Variable i zu tun.
 

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Hm, dann alles über MySQL zu verwalten wäre mir dann aber auch zu viel Arbeit.

Wie könnte man denn theoretisch überprüfen, ob die maximal-Anzahl der Zeilen erreicht ist und er eine neue hinzufügen muss?
Kleiner Tipp, es hat was mit unserer Variable i zu tun.
Könnte man nicht in die Funktion einbauen, dass wenn i = 2 ist, dass automatisch eine Zeile hinzugefügt wird? Wie man das prüfen soll, dass die Tabelle voll ist, hab ich absoult keine Idee - wie gesagt: Bin noch Anfänger. Eventuell könnte man i nicht clearen, sodass iquasi als Zähler dient, und wenn i dann z.B. 6 ist, dann wird quasi mit jedem Mal eine neue Zeile hinzugefügt. Nur wie das funktionieren soll, habe ich keine Ahnung. :eek:
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
63
18
Auf jeden Fall ist das einer der richtigen Ansätze. Man könnte sogar noch einen Schritt weiter gehen und es automatisieren, sodass es egal ist, wie viele Zeilen du beim neu laden der Seite frei hast (sonst musst, du ja immer das Javascript verändern, wenn du z.B. 6 leere Zeilen am Anfang schöner findest). Man ließt also aus, wie viele Zeilen die Tabelle hat, und nimmt den dann als Obergrenze. Wenn i also <= diese Obergrenze ist, dann füge eine neue Zeile hinzu.

Eventuell könnte man i nicht clearen, sodass iquasi als Zähler dient, und wenn i dann z.B. 6 ist
i wieder auf den Anfangswert zurücksetzen ist in der Tat nachteilhaft.

Hm, dann alles über MySQL zu verwalten wäre mir dann aber auch zu viel Arbeit.
Nicht wirklich. Es ist sogar einfacher. Aber du hast natürlich am Anfang Arbeit, alles zu automatisieren. Wenn du dich darein gefuchst hast, wird es aber wirklich leichter sein.

Ich habe außerdem noch einen Fehler behoben, der nur einen der Textfelder gecleart hat. Jetzt werden beide gecleart.



So nun aber zum neuen Code:

Code:
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();
    i--;
  }
}
HTML:
<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>
Den oberen Teil des JS-Codes kennst du ja schon. Jedoch wurde hier eine neue Variable hinzugefügt, nämlich die var obergrenze. Sie ließt die Anzahl der children aus, die in der Tabelle sind. Und hier fängt die erste etwas schwierigere Erklärung an, für die ich ein bisschen weiter ausholen werde:
Viele Programmier-/Scriptsprachen fangen beim Zählen bei 0 an. Das heißt das erste Element wäre 0, dass 2. Element dann 1 usw. Darunter fällt auch Javascript.
CSS Wiederum fängt ganz normal bei 1 an zu zählen.
Die Variable i ist deswegen 1 und nicht null, da sie beim CSS-Selektor (#table > tr:nth-child(" + i + ") > td:last-child) ja in CSS geschrieben ist. Sie fängt also ganz normal beim ersten klick beim 2. Element an, da das erste Element ja die Überschrift ist. Und gerade weil da die Überschrift ist, die bei der Zeile:
var obergrenze = document.getElementById('table').childElementCount;
ja auch mitgezählt wird, wäre es logisch, die var obergrenze noch -1 zu rechnen, um die erste Zeile zu ignorieren. Da Javascript aber bei 0 anfägt zu Zählen und CSS bei 1, ist ja quasi schon -1 gerechnet worden. Es ist also nicht erforderlich -1 zu rechnen.
So, ich hoffe das war einigermaßen verständlich.

Nun zum automatischen Einfügen der Zeilen:
Dazu ist dieser Teil verantwortlich.
Code:
if(i >= obergrenze) {
          var row = document.getElementById('table').insertRow();
        row.insertCell(0);
        row.insertCell(1);
Bei jedem Hinzufügen wird also überprüft, ob i <= der obergrenze ist. Wenn dem so ist, soll er nicht nur eine neue Tabellenzeile machen, sondern diese auch mit Zellen füllen. Dies an den Stellen 0 und 1, also an der 1 und 2 Stelle.

Als letztes zur neuen Funktion des Löschens:
Code:
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();
    i--;
  }
}
Hier wird eine Fallunterscheidung durchgeführt.
Es wird unterschieden in 2 Fälle.
Fall 1: i ist kleiner der Obergrenze, also sind noch Tabellenzeilen frei.
Fall 2: Die Tabelle ist bereits voll und es werden schon neue Zeilen hinzugefügt.

Das aus folgendem Grund.
Wenn ich einfach nur eine Zeile lösche, tritt folgendes Problem auf:
Wenn du die Zeilen noch nicht alle voll hast, trotzdem einfach eine Zeile löscht, hast du nur noch 3 Zeilen zum schreiben. Das sähe ja nicht gut aus, da vorher 4 Zeilen frei waren. Es werden also einfach nur die Zellen in der entsprechenden Zeile i entfernt.

Wenn die Tabelle schon voll ist und neue Zeilen hinzugefügt werden, soll die komplette Zeile natürlich gelöscht werden, sonst hätte ich auf einmal 2 Zeilen frei.

Zu beachten ist, dass i immer -1 gerechnet werden muss, da wir ja Zeilen entfernen. Das geht mit
i--;

i ist auch deswegen wieder so wichtig, weil es uns automatisch die letzte Zeile löscht, da es ja immer mitläuft.

Edit:
https://jsfiddle.net/Aaron3219/ahh8jvu8/
 
Zuletzt bearbeitet:
Reactions: cfs525

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Danke, ist verständlich. Das mit dem beginnen des zählen ab 0 kenne ich von C#.

Habe jetzt Mal den Code genommen von deinem Link, sodass es so aussieht:
Code:
<style>
    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;
    }
</style>
<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()">Löschen</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();
    i--;
  }   
}
</script>
Dann habe ich einfach Mal XAMPP installiert mit Apache und MySQL und wollte über PhpMyAdmin die Datei importieren. Leider kommt dabei folgende Fehlermeldung:
Code:
Fehler
Statische Analyse:

5 Fehler wurden während der Analyse gefunden.

Unerwartetes Zeichen. (near "{" at position 16)
Unerwarteter Statement-Anfang. (near "style" at position 1)
Unerwarteter Statement-Anfang. (near "h1" at position 13)
Unerwarteter Statement-Anfang. (near "{" at position 16)
Unerkannte Statement-Typ. (near "text" at position 27)
SQL-Befehl:

<style> h1 { text-align: center

MySQL meldet: Dokumentation

#1064 - Fehler in der SQL-Syntax. Bitte die korrekte Syntax im Handbuch nachschlagen bei '<style>
    h1 {
        text-align: center' in Zeile 1
Was ist der Fehler?
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
63
18
Warum denn mit phpmyadmin importieren?
Das hat doch gar nichts damit zu tun.
Phpmyadmin ist ja für Datenbanken zuständig. Da musst du mit PHP eine Verbindung herstellen und so weiter. Schau dir da zu ungebdingt ein Video zu an.
 

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Ich habe im Video 1 zu 1 das selbe gemacht, sogar das Prüfen am Anfang mit dem "It Works!" hat funktioniert. Wenn ich aber den kompletten Code abgetippt hatte und es wieder ausgeführt habe, ist einfach nichts passiert. Ich sehe bloß eine blanke Seite. Die Datenbank ist identisch, bis auf das mit dem "LIMIT 0 , 30". Da weiß ich aber nicht, wie ich das hinbekomme, dass das in der Syntax mit steht.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.061
206
63
18
Poste bitte deinen Code und erzähl alles, was du gemacht hast. Hast du dich in phpmyadmin eingeloggt und eine Datenbanktabelle mit den Anmeldedaten erstellt, die du in mysqli_connect eingegeben hast zum Beispiel?
 

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Mein Code:
PHP:
<?php

$dbhost = "localhost";
$dbuser ="root";
$dbpass ="";
$dberror1 = "Could Not Connect to Your Database";
$dberror2 = "Could Not Find Your Table";


$Conn = mysqli_connect($dbhost, $dbuser, $dbpass) or die ($error1);

$Select_db = mysqli_select_db($Conn, 'mysqli_tuts') or die ($error2);

$query = mysqli_query($Conn, "Select * FROM users");

$num_rows = mysqli_num_rows($query);


if ($num_rows =! 0){
    
    while ($fetch = mysqli_fetch_assoc($query)){
        echo $fetch['Username'];
    }
    
    
}


?>
Und meine Datenbank:
MySQL.png
 

cfs525

Neues Mitglied
1 Dezember 2017
10
0
1
19
Der Vergleichsoperator =! ist nicht möglich. Du müsstest != schreiben. Also:

Code:
if ($num_rows != 0){
Funktioniert trotzdem nicht.

Habe jetzt die error's zu dberror geändert, quasi so:
PHP:
[...]or die ("<br><br>". $dberror1);
[...]or die ("<br><br>". $dberror2);
Wenn ich ein Passwort setze erscheint ein Fehler:
Code:
Warning: mysqli_connect(): (HY000/1045): Access denied for user 'root'@'localhost' (using password: YES) in C:\xampp2\htdocs\Connect.php on line 10


Verbindung zur Datenbank konnte nicht hergestellt werden! <- Das ist bloß meine Error Meldung!
 

threadi

Moderator
Team
Moderator
20 Oktober 2006
15.326
292
83
Leipzig
www.comedy-news.de
Du musst dich natürlich an die von dir vorgenommene Konfiguration halten. Wenn Du einen MySQL-Root-Zugang hast muss für diesen auch eine Verbindung per localhost freigegeben sein. Wenn Du dafür noch ein Passwort setzt, musst Du dieses bei der Verbindung natürlich ebenfalls angeben. Wie deine Konfiguration bzgl. root aussieht, kannst Du z.B. in phpmyadmin unter Benutzer einsehen.