Wie kann ich eine dynamische HTML-Tabelle persistent erweitern?

Hey liebe GuteFrageNet-Community,

ich bastle gerade an einer Website, in der man eine Tabelle per Knopfdruck erweitern kann. Dies funktioniert soweit auch sehr gut, aber es wird nicht gespeichert, bzw. nur im Cache bei demjenigen, der den Knopfdruck ausgeführt und etwas hineingeschrieben hat.

Gibt es eine Möglichkeit, diese Tabelle zu "speichern" und es zu übernehmen?

Und noch eine weitere kleine Frage: In der Tabelle kann man wie oben schon beschrieben, etwas hineinschreiben. Wie kann man die Schriftfarbe dynamisch ändern? Also klar, mit type="color". Aber wie genau?

Hier der HTML und Javascript-Code:

<form method='post' name='first'>
  <table id='tab' border=5 id="box">
    <colgroup>
      <col width="40%">
      <col height="50%">
    </colgroup>
    <tbody>
      <th>Datum <br> Uhrzeit</th>
      <th>Map</th>
      <th>Ergebnis</th>
      <th>Spieler</th>
    </tbody>
    <tr>
      <td>
        <input id="changetext" type='text' type="color" name='Date' placeholder='Datum/Uhrzeit'>
      </td>
      <td>
        <input id="changetext" type='text' name='Map' placeholder='Map'>
      </td>
      <td>
        <input id="changetext" type='text' name='Result' placeholder='Ergebnis'>
      </td>
      <td>
        <input id="changetext" type='text' name='Player' placeholder='Spieler'>
      </td>
    </tr>
  </table>
  <br>
  <input type='button' value='neue Zeile' onClick='clone_this()'>
  <input id="changetext" type="color">
</form>
<script>
  var input = document.getElementById("changetext");
  var text = document.getElementById("text");

  input.addEventListener('change', function () {
    text.style.color = this.value;
  });
</script>

Answer 1

[RIDDICC]

1. mit nem Javascript, dass n form.submit() auslöst?
2. allerdings flackert die Seite dann wie blöd, weil sie ganz neu aufgebaut wird...
3. du könntest auch n Socket aufmachen... das wär komplizierter aber flüssiger... :)
4. https://stackoverflow.com/questions/1736382/how-to-use-sockets-in-javascript-html

Comments

[iLovePizza161]

Also das mit dem Socket hat funktioniert, jetzt nur noch das Speichern der Tabelle, ich versuche es zwar nochmal aber besser wäre es wenn du es mir erklärst.

[iLovePizza161]

@iLovePizza161

Sorry, meinte das mit der Farbe läuft, aber das Speichern der Tabelle noch nicht.

[RIDDICC]

@iLovePizza161

1. also kannst du den Server erreichen?
2. dann musst du ihm doch nur noch den Tabelleninhalt oder die frischen Änderungen schicken...
3. auf dem Server sorgst du dann dafür, dass der diese Daten in die Datenbank schreibt...
4. oda?

[iLovePizza161]

Danke für die schnelle Antwort, ich verstehe relativ wenig von Js, was genau löst form.submiot() aus und wo muss ich den einbauen? Soll ich dir mal den ganzen Code der Index Website schicken? Und was löst Socket aus bzw wo muss ich den einbauen?

Answer 2

[regex9]

Bevor ich auf dein Problem eingehe, möchte ich dich zunächst auf verschiedene Markupfehler aufmerksam machen.

1) Einem HTML Element kann nur eine ID zugeordnet werden.

Auf dem table-Element hast du aber zwei. Eines von beiden Attributen muss raus. Das gilt auch für deine Eingabefelder: Sie nutzen alle eine ID (changetext). Entweder, du verwendest stattdessen das class-Attribut oder du nummerierst die IDs (changetext1, changetext2, ...), damit sie wieder eindeutig sind.

Um dennoch noch alle Eingabefelder in JavaScript ansprechen zu können, müsstest du dann nach anderen Selektoren suchen und eine Schleife einsetzen.

Beispiel:

const inputFields = document.getElementsByClassName("changetext");

for (let i = 0; i < inputFields.length; ++i) {
  // do something with inputFields[i] ...
}

2) Wirf das border-Attribut raus, es ist veraltet.

Verwende CSS stattdessen:

table {
  border: 5px solid;
}

th, td {
  border: 1px solid;
}

Die Attributwerte gehören übrigens stets zwischen Anführungszeichen.

3) Das width-Attribut auf den col-Elementen ist veraltet.

Nutze stattdessen CSS.

Beispiel:

col:first-child {
  width: 40%;
}

col:last-child {
  width: 50%;
}

4) Die definierten Spalten widersprechen sich mit der Anzahl der th-Elemente und td-Elemente.

Du hättest vier col-Elemente angeben müssen, wenn du eine vierspaltige Tabelle definieren möchtest.

5) td- und th-Elemente gehören immer in ein gruppierendes tr-Element.

6) Die Elemente thead, tbody und tfoot dienen als (optionale) Hilfe, um eine in Bereiche Tabelle einzuteilen.

Die Kopfzellen (th) würde man typischerweise im thead unterbringen, deine td-Elemente im tbody. Das heißt, dieser Punkt ist kein Fehler, aber es wäre sinniger, es wie beschrieben zu machen.

7) Dein erstes Eingabefeld definiert zwei type-Attribute.

Eines muss raus.

Nun zu deinen Fragen:

Gibt es eine Möglichkeit diese Tabelle zu "speichern" und es zu übernehmen?

Ja. Dies muss allerdings an einer (zentralen) Stelle geschehen. Schicke die Daten an eine Serveranwendung, damit diese die Informationen persistent irgendwo abspeichern kann (in einer Datei, einer Datenbank, ...). Spätestens bei dem nächsten Aufruf der Seite müsste die Anwendung die Daten wieder aus der persistenten Quelle holen und mit in den Response schreiben.

Um das Formular selbst abzuschicken, muss nicht viel getan werden. Es muss nur das submit-Event getriggert werden. Das lässt sich einfach mit einem Button realisieren:

<button>Save</button>

Du kannst die Daten aber auch via JS / AJAX-Request verschicken, um ein Neuladen der Seite zu vermeiden.

Bezüglich der serverseitigen Anwendung gäbe es zunächst verschiedene Fragen bezüglich der dir verfügbaren Ressourcen zu klären:

• Welchen Webserver nutzt du / welche Programmiersprachen unterstützt dieser? Kannst du eine dieser Sprachen?
• Wo möchtest du die Daten speichern (in einer Datei / Datenbank)?

Comments

[iLovePizza161]

Vielen Dank für die Antwort und, dass du dir die Zeit genommen hast. Zu den Fragen:

Momentan nutze ich 000webhost um mich langsam ranzuwagen, bald nutze ich evtl. one. Mein momentaner Webserver benützt PHP und MySQL. Ich könnte evtl ein bisschen PHP.

Wenn ich die Daten auf einer Datenbank speichern will, dann müsste ich mir eine zulegen bzw kaufen oder? Wenn ich die Daten in einer Datei abspeichere geht das direkt auf dem Server? Ich würde die kostengünstigere Version nehmen :D

[regex9]

@iLovePizza161

MySQL ist ein Datenbankmanagementsystem. Das heißt, du hast bereits einen Server zur Verfügung, auf dem du eine Datenbank anlegen kannst. Es ist bereits im Hosting-Paket mit enthalten. Auch bei anderen Webhostern wirst du meist so ein Paket bekommen.

Dateien kannst du ganz sicher via FTP-Client (z.B. FileZilla) hochladen. PHP bietet bspw. für die Speicherung von Daten im CSV-Format schon einige Funktionen an. Ansonsten sind andere Formate (JSON, INI, individuell, ...) natürlich auch möglich. Beim Schreiben und Lesen der Daten solltest du die Datei für die gegebene Zeit am besten ent-/sperren, um Inkonsistenzen zu verhindern.

Vermutlich hast du bei 000webhost auch phpMyAdmin installiert (schon vom Hoster aus). Das ist eine Webanwendung, die dir eine benutzerfreundliche Oberfläche bietet, in der du deine Datenbanken verwalten kannst. In der würde ich mir eine Datenbank mit einer Tabelle anlegen.

Du hast vier Spalten (in Klammern die Datentypen):

• Datum und Uhrzeit (DATETIME)
• Map (VARCHAR)
• Ergebnis (entweder VARCHAR oder wenn du darin nur Zahlen speicherst, einen numerischen Typ)
• Spieler (VARCHAR)

Mit PHP würdest du die Daten vom Client stets entgegennehmen und dann in der Datenbank speichern oder andersherum, die Daten aus der Datenbank lesen und an den Client schicken. Für die Kommunikation mit der Datenbank kannst du auf verschiedene vorimplementierte Funktionen von PHP zugreifen. Entweder du nutzt MySQLi oder PDO. Nutze in jedem Fall Prepared Statements, denn die filtern / maskieren die Eingaben, die an die DB gesendet werden sollen, intern und verhindern so eine mögliche MySQL-Injection.

Ansonsten benötigst du noch SQL-Kenntnisse, um die Queries definieren zu können, die an den Datenbankserver geschickt werden.

Wenn du die Daten via Formular verschickst, lassen sie sich im Zielskript (s. action-Attribut des form-Elements) aus dem $_POST-Array auslesen. Ein ähnliches Beispiel zum Auslesen von Formulardaten findest du hier. In deinem Fall kannst du deine Felder sogar gruppieren (lies hier), um das Auslesen später zu vereinfachen.

Der alternative Weg wäre das Auslesen der Formularfelder mit JavaScript und dann das Senden der Daten an die Serveranwendung (PHP-Skript) via XmlHttpRequest. Den Response kannst du in diesem Zuge sofort abgreifen und in dein Dokument einfügen.

Soweit nur viele Stichworte und Tipps in Kurzfassung. Grundvoraussetzung wäre zunächst, dass du dir Grundlagenkenntnisse zu PHP und SQL aneignest.