OnClick Hervorhebung
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auswahl
code
definierte farbe
einzelne zeile
entsprechende ereignis
entsprechende zeile
ersten spalte
folgender funktion
funktioniert code
genannten code
hintergrund
internet
klicken
langem versuchen
markieren
richtige forum
sagen
tabelle
verschiebung
zeile
-
Hallo.
Ich bin mir nicht sicher, ob ich hier in der richtigen Kategorie schreiben. Falls ich hier falsch bin, bitte ich einen Admin um die Verschiebung ins richtige Forum. Thx.
Nun zu meiner Frage:
Ich habe auf einer Webseite eine Tabelle mit mehreren Spalten. In jeder Zeile ist in der ersten Spalte eine Checkbox vorhanden. In der Überschirftenzeile der Tabelle ist eine Checkbox enthalten, die beim anklicken alle Checkboxen in den Zeilen der Tabelle auswählt.
Nun möchte ich, das bei augewählter Checkbox die entsprechende Zeile markiert bzw. der Hintergrund dieser Zeile farblich hervorgehoben wird. Dies sowohl beim auswählen einer einzelnen Checkbox als auch beim auswählen aller Checkboxen (wie oben beschrieben).
Ich habe es soweit umgesetzt, das die einzelne Zeile bei Auswahl einer Checkbox markiert wird. Dies aber auch nur im Internet Explorer. In Firefox funktioniert es nicht!?
Kann mir bitte hier jemand weiterhelfen. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Java ist nicht JavaScript!
Verschoben nach HTML und JavaScript
Ich habe es soweit umgesetzt, das die einzelne Zeile bei Auswahl einer Checkbox markiert wird. Dies aber auch nur im Internet Explorer. In Firefox funktioniert es nicht!?
Ohne deinen Code können wir dir nicht sagen, warum es nicht funktioniert. -
<html> <head> <title></title> <meta name="generator" content="Webweaver v1.6.7 [http://webweaver.ws]" /> </head> <style type="text/css"> body td {background-color: red;} </style> <script type="text/javascript"> function changecolor(node) { var farbe = "#0000ff"; if (node.checked == true){farbe = "#00ff00"} var TRnode = node.parentNode.parentNode; var TDnode = TRnode.getElementsByTagName("TD"); for (a=0;a< TDnode.length;a++) { TDnode[a].style["backgroundColor"] = farbe; } } </script> <body> <table> <tr> <td><input type="checkbox" name="" value="" onmouseup="changecolor(this)" onbuttonup="changecolor(this)"/></td> <td>bla</td> <td>blup</td> </tr> <tr> <td><input type="checkbox" name="" value="" onmouseup="changecolor(this)" onbuttonup="changecolor(this)"/></td> <td>bla</td> <td>blup</td> </tr> <tr> <td><input type="checkbox" name="" value="" onmouseup="changecolor(this)" onbuttonup="changecolor(this)"/></td> <td>bla</td> <td>blup</td> </tr> </table> </body> </html>
ansonsten gilt :
bladehunter schrieb:
Java ist nicht JavaScript!
Verschoben nach HTML und JavaScript
Ich habe es soweit umgesetzt, das die einzelne Zeile bei Auswahl einer Checkbox markiert wird. Dies aber auch nur im Internet Explorer. In Firefox funktioniert es nicht!?
Ohne deinen Code können wir dir nicht sagen, warum es nicht funktioniert.
-
Mit folgender Funktion erreiche ich, dass alle Checkboxen angewählt bzw. wieder abgewählt werden (Ich nenne diesen mal "Master Checkbox"):
JS: function AllSelect(form){ for(var x = 0; x < form.elements.length; x++){ var y = form.elements[x]; if(y.name != 'ALLSELECT'){ y.checked = form.ALLSELECT.checked; } } } HTML: <input type="checkbox" name="ALLSELECT" value="ALLSELECT" onclick="AllSelect(this.form);" />
Zur farblichen Hervorhebung einer Tabellenzeile entweder durch klicken auf die Tabellenzeile oder durch klicken auf die entsprechende Checkbox:
JS: function colorrow_to(id){ window.setTimeout("colorrow('"+id+"')", 20); return true; } function colorrow(id){ if(document.getElementById(id).style.backgroundColor == '#ccffcc'){ document.getElementById(id).style.backgroundColor = ''; } else{ document.getElementById(id).style.backgroundColor = '#ccffcc'; } } HTML: <tr id="1"> <label for="check1"> <td><input type="checkbox" id="check1" onclick="return colorrow_to(1);" onkeyup="return colorrow_to(1);" /></td> <td>...</td> </label> </tr>
Wie gesagt, ist mit diesem Code folgendes erreicht worden:
Beim klicken irgendwo in der Tabellenzeile oder anwählen der checkbox wird die Tabellenzeile bzw. der Hintergrund der Zeile in die definierte Farbe gefärbt. Dies aber auch nur im Internet Explorer. Im Firefox funktionierts leider nicht. Beim Abwählen der Checkbox wird der Hintergrung der Tabellenzeile wieder transparent bzw. farblos/weiß.
Ich kenne mich mit javascript nicht besonders aus. Soweit ich überlegt habe, benötige ich ein Kontrollmechanismus der überprüft, ob die Checkbox angewählt ist oder nicht und das entsprechende Ereignis durchführt (färben bzw. nicht färben). Ich bin nach langem Versuchen zu keinem Ergebnis gekommen. Ich habe lediglich oben genannten Code zusammen bekommen.
Es fehlt mir nach einer Lösung;
1. Dies auch im Firefox umzusetzen.
2. Durch die Auswahl aller Checkboxen "mit dem Master Checkbox" auch alle Tabellenzeilenhintergründe farblich hervorgehoben werden.
-
Das würde mich auch sehr interessieren. Hatte so etwas auch probiert, leider erfolglos und soweit bin ich auch nicht gekommen. Wenn jmd. helfen könnte würde mir das auch sehr nützen. Ich bedanke mich auch schonmal.
-
Hilft Euch das hier?
<html> <head> <style type="text/css"> .C1 { background-color:#ff0000; } .C2 { background-color:#00ff00; } </style> <script type="text/javascript"> function Wechsel(id){ if (document.getElementById(id).className == 'C1') { document.getElementById(id).className = 'C2'; } else { document.getElementById(id).className = 'C1'; } } </script> <body> <table> <tr id="1" class="C1"> <label for="check1"> <td><input type="checkbox" id="check1" onclick="Wechsel('1');" /></td> <td>...</td> </label> </tr> </table> </body> </html> -
Das würde jetzt auch nur die einzelne Zeile markieren. Das habe ich eigentlich soweit auch hinbekommen. Nur schaffe ich es nicht alle Zeilen der Tabelle zu markieren. Wie kann man da vorgehen?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
