Tabellenzelleninhalt in Abhängigkeit einer Checkbox ändern

[Micha]

Hallo,

ich habe eine Tabelle, bei der in einigen Spalten Checkboxen drin sind. Diese sind disabled, da sie lediglich eine Zusammenfassung vorher getroffener Einstellungen widerspiegeln.

Ist es möglich, diese Checkboxen auszublenden und stattdessen im umschließenden TD-Element in Abhängigkeit der Checkbox etwas einzufügen?

Beispiel-Code

<table>  
<tr>  
<td>foo</td>  
<td>bar</td>  
<td><input type="checkbox" disabled="disabled" readonly="readonly" name="a" value="false"></td>  
<td><input type="checkbox" disabled="disabled" readonly="readonly" name="a" value="true" checked="checked"></td>  
</tr>  
</table>

Die Boxen anzusprechen, um sie bspw. auszublenden, ist sicher kein Problem.
input[type="checkbox"] {display: none;}

aber wie schaffe ich es, dass TD-Element bspw. mit content="Aktiv" bzw. content="Inaktiv" zu füllen oder ist hierfür ein zusätzliches Element notwendig wie in diesem Beispiel?

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

aber wie schaffe ich es, dass TD-Element bspw. mit content="Aktiv" bzw. content="Inaktiv" zu füllen oder ist hierfür ein zusätzliches Element notwendig wie in diesem Beispiel?

Da CSS bis Version 3 nicht rückwärts selektieren kann, garnicht. Die Spannelemente sind in dem Beispiel drin, da die Pseudoelemente ::before und ::after nicht auf leere Elemente wie input angewendet werden können.

Matthias

[Micha]

Hallo Matthias Apsel,

vielen Dank für Deine Antwort. Das es etwas wie parent nicht gibt, hatte ich schon gelesen. Ich hatte gehofft, dass es einen kleinen Umweg gibt, den ich nutzen könnte.

Spannelemente sind in dem Beispiel drin, da die Pseudoelemente ::before und ::after nicht auf leere Elemente wie input angewendet werden können.

Aber in dem Beispiel ist das ::after doch auch völlig unnötig. Es reicht doch bereits input:disabled + span {content: " nicht auswählbar"} aus.

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

Spannelemente sind in dem Beispiel drin, da die Pseudoelemente ::before und ::after nicht auf leere Elemente wie input angewendet werden können.
Aber in dem Beispiel ist das ::after doch auch völlig unnötig. Es reicht doch bereits input:disabled + span {content: " nicht auswählbar"} aus.

Leider nein. CSS kann nicht bestehendes HTML ändern sondern nur an die Elemente etwas dranhängen oder vorwegstellen. Die Eigenschaft content wirkt nur auf diese Pseudoelemente.

Matthias

[Micha]

Hallo Matthias Apsel,

Leider nein.

Dann kann Opera wohl etwas mehr. ;-)

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

Dann kann Opera wohl etwas mehr. ;-)

Offensichtlich. Stellt sich die Frage: bug oder feature? In meinen Augen bug.

Matthias

[Micha]

Hallo Matthias Apsel,

In meinen Augen bug.

Ich will das nicht bewerten, da dies nicht mein wirkliches Problem ist. Es ist mir beim Rumprobieren nur aufgefallen.

Matthias

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

Das es etwas wie parent nicht gibt, hatte ich schon gelesen. Ich hatte gehofft, dass es einen kleinen Umweg gibt, den ich nutzen könnte.

Du kannst ja mal zeigen, was es werden soll. U.U. kann man ja tatsächlich ein zusätzliches Element wie gewünscht formatieren.

Matthias

[Micha]

Hallo Matthias Apsel,

Du kannst ja mal zeigen, was es werden soll. U.U. kann man ja tatsächlich ein zusätzliches Element wie gewünscht formatieren.

Es ist letztlich schon so, wie ich es gezeigt hatte. Ein Beispiel findest Du unter (bewusst nicht verlinkt):
dev.derletztekick.de/tmp/freie_stationierung.html

Es ist ein Protokoll einer Berechnung. Das HTML wird über ein Template vom Programm zusammengebaut. In einigen Tabellen gibt es die Spalte "Ausreißer", wo derzeit besagte Checkboxen drin sind. Hier könnte ich mir vorstellen, die durch ein Häkchen zu ersetzen. Am liebsten wäre mir, das Template nicht zu ändern, sondern per CSS die Formatierung zu erreichen.

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

Es ist ein Protokoll einer Berechnung. Das HTML wird über ein Template vom Programm zusammengebaut. In einigen Tabellen gibt es die Spalte "Ausreißer", wo derzeit besagte Checkboxen drin sind. Hier könnte ich mir vorstellen, die durch ein Häkchen zu ersetzen. Am liebsten wäre mir, das Template nicht zu ändern, sondern per CSS die Formatierung zu erreichen.

So wie ich das sehe, ist das Template fehlerhaft, denn eine Eingabe in dieses input-Feld ist weder möglich (da readonly) noch erwünscht. Das Input-Feld sollte im Template also durch ✔ ersetzt werden, wobei ich den Haken vielleicht auch für fehl am Platze halte, denn es soll doch eher eine Warnung sein? Also vielleicht ein normales fettes rotes Ausrufezeichen?

Matthias

[Micha]

Hallo Matthias Apsel,

So wie ich das sehe, ist das Template fehlerhaft, denn eine Eingabe in dieses input-Feld ist weder möglich (da readonly) noch erwünscht.

Es zeigt, dass ein Merkmal in den Daten vermutet wurde vom Programm. Dem Auffinden dieser vermuteten Schwachstelle soll man sich natürlich nicht einfach durch Abhaken entledigen. Hier wird man sich über die getroffenen Einstellungen Gedanken machen müssen - Readonly ist somit gewollt. Es ist, wie gesagt, der Report aus einer Applikation.

Das Input-Feld sollte im Template also durch ✔ ersetzt werden

Wenn alles okay ist, ja. Wenn nicht, wäre ein Kreuz bspw. gut. Das meinte ich mit in "Abhängigkeit einer Checkbox".
Das Symbol selbst ist aber eher ein sekundäres Problem. ;-)

Mit freundlichem Gruß
Micha

[Matthias Apsel]

Om nah hoo pez nyeetz, Micha!

So wie ich das sehe, ist das Template fehlerhaft, denn eine Eingabe in dieses input-Feld ist weder möglich (da readonly) noch erwünscht.
Es zeigt, dass ein Merkmal in den Daten vermutet wurde vom Programm. Dem Auffinden dieser vermuteten Schwachstelle soll man sich natürlich nicht einfach durch Abhaken entledigen. Hier wird man sich über die getroffenen Einstellungen Gedanken machen müssen - Readonly ist somit gewollt. Es ist, wie gesagt, der Report aus einer Applikation.

also kein (semantisch falsches!) Inputfeld sondern je nach Ergebnis unterschiedliche Symbole. Mit reinem CSS sehe ich keine Möglichkeit.

Matthias

[Micha]

Hallo Matthias Apsel,

also kein (semantisch falsches!) Inputfeld sondern je nach Ergebnis unterschiedliche Symbole.

So würde ich es sehen, ja. Es zeigt boolesch an, ob ein Merkmal zutrifft oder eben nicht. Da es ein Endergebnis ist, ist das nachträgliche Manipulieren unerwünscht. Aus diesem Grund kann es auch durch zwei Symbole ersetzt werden...

Mit reinem CSS sehe ich keine Möglichkeit.

Okay, dann überlege ich mal, was besser ist. Die Checkbox ganz weg oder ein zusätzliches leeres SPAN dahinter...

Besten Dank für Deine Hilfe!

Mit freundlichem Gruß
Micha