Tabelle mit Dropdown Menü´s erstellen und auswerten

[Muffte]

Hallo liebe Forenmitglieder,

ich bin neu im Forum und absoluter Anfänger im Bereich html.
Ich habe mir bis jetzt ein paar Youtube Videos über html angesehen, und schon einige Sachen selbst versucht zu schreiben.
Die, was mich sehr freut sogar funktionieren.

Jetzt brauche ich aber eure Hilfe, weil ich für meine Arbeit ein ich nenne es mal "Programm" schreiben will das mir die Arbeit erleichtert, und ich nicht weiß
wie oder mit welchen Tags ich starten soll.

1. folgende Ausgangssituation


Ich möchte eine Tabelle erstellen die mit Dropdown-Menü´s versehen ist.
- Wie oben zu sehen ist in jeder Spalte, und jedem Feld ein extra Dropdown-Menü
- In der Spalte "Nr." gibt es in jeder Zelle folgende Auswahlmöglichkeiten: 1-100.
- In der Spalte "Variante" gibt es: XA und XX
- usw.

Eine kpl. ausgefüllte Tabelle sieht dann z.B. folgendermaßen aus:


Bei mir ist der aktuelle Stand so:


Ich habe es mit dem Tag <select> schon geschafft, Dropdown Menü´s zu erstellen.
Dadurch dass ich aber sehr viele Dropdown-Menü´s neben und übereinander brauche, und diese wie in einer Tabelle angeordnet sind, habe ich schon versucht
diese mit einem <table> Tag zu verbinden, aber das funktioniert nicht.

Meine Fragen sind jetzt folgende:
1. Wie kann ich so viele Dropdown Menü´s sauber erstellen, dass es ausschaut wie eine Tabelle?
2. Oder ist das eine grafische Darstellung, und hat nichts mit HTML sondern mit CSS zu tun?

Danke

Beste Grüße

Wolfgang

 

[MrMurphy]

Ich verstehe leider nicht was du erreichen willst. Deine Beschreibung und deine Bilder deuten nicht auf eine sinnvolle Anwendung hin.

HTML-Tabellen (table-Element mit seinen Kindelementen) sind nur für Tabellendaten gedacht, die bei dir nach deinen Informationen nicht vorliegen. Dein Dropdown-Menü deutet eher auf ein Formular hin.

Geht es auch um JavaScript und / oder Datenbanken? Nur HTML und CSS erscheinen bei deinen Wünschen nicht ausreichend.

 

[Muffte]

Hi MrMurphy,

danke für deine Antwort.

Du hast Recht, es soll ein Formular werden das im Browser ausgefüllt wird.

Wenn das Formular soweit ausgefüllt ist, soll eigentlich folgendes passieren:

Beispiel:


1. Es wird eine Text Zusammenfassung erstellt, die mit kopieren und einfügen in SAP Auftrag eingesetzt wird.
Beispiel:


2. Jetzt wird es umfangreicher:
2.1. kurze Begriff-Erklärung anhand des Modell´s:
Das Modell "XX" besteht aus 2 Artikeln:
Artikel 1: "XX1"
Artikel 2: "XX2"
selbes gilt für "XA"
Artikel 1: "XA1"
Artikel 2: "XA2"

Diese 2 Artikel setzen sich folgendermaßen anhand der ersten Zeile des Beispiels zusammen.

Artikel 1: "XX1 10x200mm"
Artikel 2: "XX2 10x200x50mm"

Mein Wunsch ist das alle Eingaben im Formular in ihre Einzelartikel zerlegt, und anschließend die selben Einzelartikel zusammen gezählt werden.

Beispiel:
Artikel zerlegt in ihre Einzelartikel:




Ich hoffe das es halbwegs verständlich ist.

Danke schonmal für die Hilfe.

Gute Nacht :)

 

[AndreasB]

Hallo @Muffte, und willkommen im Forum.

Wie ich das sehe, gibt es Bei deinem Projekt zwei Aufgaben:

1. Das Erstellen des "Formulars". (Oder der Tabelle - die Darstellung ist da erst einmal nebensächlich)
2. Das Auswerten des "Formulars". (Textzusammenfassung / Teile Auflistung...)

Zu Aufagabe 1

Aufbau:
Hier kommt es auch darauf an, wieviel des Markups du von Hand schreiben möchtest und wieviel du dir bei der Erstellung von einer Scriptsprache helfen lassen möchtest / kannst.

1. Ein <select> Elemente machen nur Sinn, wenn es eine endliche Anzahl von Möglichkeiten gibt. Gibt es diese bei jeder deiner Spalten?
   Ich meine auch bei breite, höhe und stärke? Wenn nicht, würde ich dir bei solchen Feldern eher das <input> Element (für Zahlen mit type="number") empfehlen.
2. Die Spalte Nr sieht mir nach einer Fortlaufenden Nummer aus. Wenn das so ist, könntest du mit JavaScript (oder auf dem Server von PHP) diese automatisch eintragen lassen. oder:
3. Steht die Anzahl der Zeilen deines Formulars, schon fest? Wenn nicht könntest du mit JavaScript (zum Beispiel über einen Button) bei bedarf eine neue Zeile hinzufügen. Dadurch sparst du dir eine menge Arbeit beim Anlegen der Zeilen.

Aussehen:
Um das Aussehen einer Tabelle hinzubekommen musst du nicht unbedingt das <table> Element verwenden. Du kannst diese Struktur auch zum Beispiel mit display: grid erreichen.

Zu Aufagabe 2

Es kommt darauf an, ob du die Daten auf dem Server (zum Beispiel mit Hilfe von PHP) oder direkt im Browser mit JavaScript auswerten möchtest.
Hast du dir darüber schon Gedanken gemacht?

Gruß
Andreas