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

 

[Muffte]

Hallo Andreas,

danke für deine tolle Hilfe.

In der Zwischenzeit ist jetzt einiges passiert. Mein Bruder meinte ich soll das Projekt mit Angular erstellen, weil dies die bessere Basis dafür ist.

Ich habe versucht einige HTML und ANGULAR Tutorials zu machen, leider nur mit mässigem Erfolg, weil Sachen die in den Videos funktionierten bei mir nicht gingen.


Erstmal zu meinem PC mit den installierten Programmen:
- VS Code
- Angular Version

- node.js

-typescript



Jetzt habe ich einige Fragen und hoffe ihr könnt mir hier weiterhelfen:
IMG einfügen
aktueller Stand

ist eine Anzeige in Chrome bzw. Edge nicht möglich

Ich verstehe nicht warum. Das selbe Problem besteht auch bei Angular.

Bei den Tutorials die ich bis jetzt gesehen habe, wird immer ein "assets" Ordner erstellt, in den Bilder etc. abgelegt werden. Obwohl ich schon ca. 6 Angular Test Projekte erstellt habe, wird nie dieser Ordner
erstellt. Wenn ich diesen Ordner selbst erstellt, schaffe ich es nicht ein Bild einzubinden.
Beispiel Angular Projekt:



Habt ihr eine Idee an was das liegen kann?

Danke

Schönen Abend

 

[Sempervivum]

Beliebter Fehler, den man dauernd überliest: <img scr="1.jpg
Schau genau hin.

BTW, Du schreibst:

Mein Bruder meinte ich soll das Projekt mit Angular erstellen, weil dies die bessere Basis dafür ist.

Und zuvor:

ich bin neu im Forum und absoluter Anfänger im Bereich html.

IMO wäre dann Angular den dritten Schritt vor dem ersten tun.
1. Schritt: HTML und CSS lernen
2. Schritt: Javascript lernen
3. Schritt: Ein Framework wie Angular lernen

In einem Artikel über Angular:

https://www.spiceworks.com/tech/devops/articles/what-is-angular-js/#_004

lese ich:

3. Difficult to learn​

AngularJS lacks the necessary documentation for knowledge sharing and learning. As a result, new learners or web developers take time to adapt to the framework. Moreover, developers who lack experience working with MVC architectural patterns or are unfamiliar with MVC can face even more challenges.

Additionally, directives and features like dependency injections are quite complex for traditional developers to grasp. Hence, AngularJS presents a steep learning curve for budding web developers, business owners, or entrepreneurs looking to build responsive applications.

Das scheint alles keine Empfehlung für dich zu sein, mit Angular zu beginnen. Ich habe den Eindruck, dass die Webentwicklung nicht der Kern deiner Arbeit ist und Du nur quasi nebenbei ein Hilfsmittel für deinen Hauptjob bauen willst. Da ist es sehr fraglich, ob es lohnend ist, den Aufwand für einen Einstieg in Angular zu investieren.

Und, nebenbei: "xyz hat gesagt: ..." war noch nie eine gute Begründung, etwas zu tun.

 

[AndreasB]

Da gebe ich @Sempervivum auf jeden Fall recht.
Angular solltest du erstmal nicht verwenden. Du möchtest ja auch "nur" eine Tabelle und nicht eine komplette Web Application erstellen.

Nochmal zum Verständnis:
In deinem Anfangspost schreibst du, dass du neu im Bereich HTML bist. Zu CSS und JS schreibst du nichts. Kann ich davon ausgehen, dass diese Bereiche auch neu für dich sind?

Abgesehen von der unnötigen Komplexität, die ein JS-Framework in dein Projekt mitbringt, würde dadurch nur der Punkt eins (Das Erstellen des "Formulars") deiner "Aufgaben" abgedeckt werden.
Punkt zwei (Das Auswerten des "Formulars") wird dir durch ein JS-Frameworks nicht abgenommen.

 

[JohnWix]

Ich bin gespannt auf das Ende dieser Geschichte. Ich lache wirklich nicht, ehrlich.