Radio Buttons und Tabellen

[Biglebowski]

Hallo. Ich möchte gerne eine Tabelle erzeugen, die ungefähr so aussieht:
[TABLE="class: grid, width: 700"]
[TR]
[TD][/TD]
[TD="align: center"]Wert 1[/TD]
[TD="align: center"]Wert 2[/TD]
[TD="align: center"]Wert 3[/TD]
[TD="align: center"]Wert 4[/TD]
[TD="align: center"]Wert 5[/TD]
[TD="align: center"]Wert 6[/TD]
[TD="align: center"]Wert 7[/TD]
[/TR]
[TR]
[TD]Eigenschaft 1[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[/TR]
[TR]
[TD]Eigenschaft 2[/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[/TR]
[TR]
[TD]Eigenschaft 3[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[/TR]
[TR]
[TD]Eigenschaft 4[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[/TR]
[TR]
[TD]Eigenschaft 5[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[/TR]
[TR]
[TD]Eigenschaft 6[/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[/TR]
[TR]
[TD]Eigenschaft 7[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[TD="align: center"]x[/TD]
[TD="align: center"][/TD]
[TD="align: center"][/TD]
[/TR]
[/TABLE]

(Beispieltabelle)

Die Schnittpunkte der Werte und der Eigenschaften sollen Radio Buttons werden.
Voraussetzung der Tabelle soll sein, dass einer Eigenschaft nur ein Wert zugewiesen werden kann (z.B. Eigenschaft 1 = Wert 5, Eigenschaft 2 = Wert 2, usw.)
NICHT Möglich sein sollte es mehreren Eigenschaften denselben Wert zuzuweisen.
Wie lässt sich das in HTML bewerkstelligen, ohne dass ich auf JavaScript zugreifen muss?
Falls es ohne JS nicht geht, bräuchte ich lediglich einen Denkansatz, wie ich diese Tabelle erstellen kann.

MfG und Danke im voraus

Le Big ;)

 

[threadi]

In purem HTML kannst Du eben den HTML-Code schreiben. Also eine Tabelle mit Zellen in denen input-radio-Felder vorhanden sind. Den input-radio-Feldern auf einer Zeile gibst Du den selben "name" aber unterschiedliche "values". Dadurch kann zu einer Eigenschaft nur 1 Wert angeklickt werden.

Allerdings: damit auch dein 2. Wunsch funktioniert brauchst Du durchaus JavaScript. Mit reinem HTML geht das nicht.

 

[Biglebowski]

Verdammt, und ich dachte, ich komme ohne aus ;)

Hast Du irgendwo einen ANSATZ für das Problem ?
Die Lösung möchte ich mir dann gerne selber zusammenbasteln...

 

[Tronjer]

Wie, die X in den Tabellenzellen sollen durch Radiobuttons dargestellt werden? Das ergibt doch keinen Sinn.
Und wie willst du die Werte denn zuweisen, durch Klick in eine Zelle?

Von der Programmlogik her würde ich es mir etwa so vorstellen. Beim Klick wird die aktuelle Zelle darauf geprüft, ob deren innerHTML kein Leerstring ist. Falls nein, wird es gelöscht. In der zweiten Abfrage wird überprüft, ob innerhalb derselben Tabellenspalte oder -reihe in irgendeiner Zelle ein Wert für innerHTML gesetzt ist. Falls ja, wird die Funktion beendet, falls nein, ein X in die Zelle geschrieben.

Das überprüfen der Reihen und Spalten ist etwas tricky, weil sie, anders als in Excel, keine Adressen besitzen. Ich würde es mit traversieren versuchen. Dafür gibt es in JavaScript Parents, Children und Siblings. Erst die jeweilige <tr> daraufhin überprüfen, ob für eine der benachbarten <td> bereits ein Wert gesetzt ist. Falls nein, die Position der angeklickten <td> innerhalb ihrer <tr> merken (Variable) und alle anderen <tr> der Tabelle checken, ob in deren <td> an derselben Position ein Wert steht.

 

[Biglebowski]

Nein, nicht die X sollen Werte ergeben, sondern die X sollen oben in der Tabelle ein Beispiel sein.

Nehmen wir mal an, die Tabelle oben ist so schon vorbelegt, und ich möchte der Eigenschaft 2 den Wert 4 zuweisen. Wert 4 ist aber (noch) der Eigenschaft 5 zugeordnet. Bei einem Klick auf das Radio-Button bei (Achtung, Adresse ;) ) "Eigenschaft 2, Wert 4" soll dann automatisch der Wert der Eigenschaft 5 auf den Wert 1 gesetzt werden (Die ja vorherher noch der Eigenschaft 2 zugeordnet war).

Ich habe durch etwas stöbern im Netz schon herausgefunden, dass man mit jquery da was machen kann, allerdings nur, wenn jeder Radiobutton auch einen eindeutigen Namen (ID) besitzt.
Soweit bin ich nun schon...

(Langsam glaube ich, das gehört nicht mehr in dieses Unterforum)

Nun bin ich nur noch auf der Suche nach einem Ansatz, um dieses Problem mithilfe von jquery zu lösen...

... wenn ich den Anfang finde, wo ich ansetzen kann ;)

 

[Tronjer]

Man könnte natürlich auch eindeutige Bezeichner, wie ID's oder ein data-Attribut vergeben. Das wäre aber mehr Schreibaufwand.

Ich würde auch zu jQuery raten. Wobei der tricky Part hier eher in der Programmlogik als in der Umsetzung liegt. Mein erster Schritt wäre ein "Script" in Pseudocode.