cybton.com
Über uns | Jobs | Werbung | Sitemap | AGB | Impressum | Hilfe ?
 (» Kostenlos anmelden)
Home
Community
News
Mein Account
Infos
eBooks
Forum
Aktuellste Beiträge
Forenregeln

Community
BB-Codes
Tags
Chat
Suche (Web)
Wer ist online?
Top-User

Basar


Statistik
Mitglieder gesamt: 68073
Mitglieder online: 4
Gäste online: 2
mehr...

Anzeige
Forum » Forum: Website & Webprogrammierung » Thread: Checkbox and bg color of table

Thread: Checkbox and bg color of table

Tags: javascript

09.05.2008 03:46 Uhr

 
herbx
Status: offline
Hello everybody..i'll try to expalin that in german
ich brache wieder hilfe. Ich möchte folgendes erreichen ich habe eine checkbox. Wenn der user diese nun auswählt soll eine bestimmte zeite <tr id="row1"> die hintergrund farbe ändern. Ich habe bereits eine JS function:
PHP:
1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
      <!--
        function switchColor(COLOR,TARGET_ID){
                 document.getElementById(TARGET_ID).style.backgroundColor = COLOR;
                 }
        function accessLink(URL,TARGET){
                 window.open(URL,TARGET);
                 }
      -->
    </script>
ich muss jetzt nur wissen, wie ich mit der checkbox die tabelle anspreche und zwar für den fall

1. der user fügt ein häckchen hinzu
2. oder entfernt das häckchen

ich dache es würde so gehen, aber das hat dann wohl nicht so ganz geklappt und ich wüsste auch nicht wie man dann onunselect des dann ändern kann.
PHP:
1

<input type="checkbox" name="mencheck" id="mencheck" onselect="switchColor('#FFDDDD','row1');">
wäre super wenn mir jemand dabei helfen könnte. Thank you very much!!!!
___________________________
I have been in the USA 4 8months
09.05.2008 07:51 Uhr

 
bmk
Moderator
Status: offline
onselect? Das müsste onchange, oder - kompatibler - onclick heißen...
___________________________
Let's code responsibly...
Webcrawler -- Portal für Dirigenten -- Musikverein Königstetten
09.05.2008 08:54 Uhr

 
HangMan
Status: offline
Bei onclick müsste aber in der Funktion switchColor() den Zustand der Checkbox geprüft werden da beim Abwählen wieder das onclick-Ereignis auftritt und die Farbe nicht wieder zurückwechseln würde.
1 mal bearbeitet
___________________________
Programmieren ist eine Sucht deren Rausch ein Gefühl der Macht ist... sofern man den Computer bezwingt. Gefährliche Nebenwirkungen: Verstärkter Kaffee-Konsum, erhöhter Ehrgeiz und ggf. Wutausbrüche und verknotete Gehirnwindungen.
09.05.2008 13:43 Uhr

 
dragonl
Status: offline
Hallo zusammen.

So, dachte ich mir ich mach das auch mal eben schnell, kann ja nicht so schwer sein.. denkste !
(bzw. die erste Idee ist meistens die Beste)
Da das ja auch eine kleine Vorgeschichte hat wollte ich die "switchColor()" Funktion nicht erweitern, sondern eine eigene Funktion dafür erstellen ("toggleColor()") leider funktioniert das in verschiedenen Browsern anscheinend nicht (s.Quelle Post-6).

Aber auch der vorgeschlagene Weg selbiges über die ClassNamen zu realisieren will nicht so ganz.
An sich funktioniert das sehr wohl wie man mit der Funktion "toggleClass()" sehen kann. Allerdings kommt es in Kombination mit der "switchColor()" Funktion zu Problemen.
Ladet das Dokument neu, bleibt mit dem Cursor von der Tabelle WEG !
Aktiviert / deaktiviert die Checkboxen aus dem Class-Bereich, soweit funktioniert es.
Nun führt den Cursor testweise über eine der Tabellenzeile und aktiviert / deaktiviert nun die Checkboxen ein weiteres mal, diesmal passiert leider nichts mehr.

Letzteres ist dann von der Idee von HangMan abgesehen aber gleichzeitig mit meiner ursprünglichen Funkton (switchColor()) kombiniert ohne diese zu verändern.
Dies sollte nun auch in allen Browsern funktionieren, was allerdings bleibt: Hervorgehobene Tabellenzeilen ändern weiterhin ihre Hintergrundfarbe wenn man den Mauszeiger über sie bewegt und verlieren dadurch ihren Status als markierte Zeile.
+ html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>RowHighlight</title>
    <style type="text/css">
      <!--
        table { border:1px solid #0f0f0f; background-color:#f0f0f0; }
        tr    { cursor:pointer; }
        
        .rowNormal   { background-color:#f0f0f0; }
        .rowSelected { background-color:#dd0000; }
      -->
    </style>
    <script type="text/javascript">
      <!--
        function switchColor(COLOR,TARGET_ID){
                 document.getElementById(TARGET_ID).style.backgroundColor = COLOR;
                 }
        function accessLink(URL,TARGET){
                 window.open(URL,TARGET);
                 }
                 
        function toggleColor(COLOR_HIGH,COLOR_OUT,TARGET_ID){
                 var TARGET  = document.getElementById(TARGET_ID);
                 var bgColor = TARGET.style.backgroundColor;
//                 alert(bgColor);
                 if(bgColor!=COLOR_HIGH)
                    TARGET.style.backgroundColor = COLOR_HIGH;
                    else TARGET.style.backgroundColor = COLOR_OUT;
                 }
        function toggleClass(CLASS_HIGH,CLASS_OUT,TARGET_ID){
                 var TARGET  = document.getElementById(TARGET_ID);
                 var clsName = TARGET.className;
//                 alert(clsName);
                 if(clsName!=CLASS_HIGH)
                    TARGET.className = CLASS_HIGH;
                    else TARGET.className = CLASS_OUT;
                 }
      -->
    </script>
  </head>
  <body>
  
    <table>
      <tr id="row1" class="rowNormal"
                    onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowOne.html','_self');">
        <td>row 1 - cell 1</td>
        <td>row 1 - cell 2</td>
        <td>row 1 - cell 3</td>
      </tr>
      <tr id="row2" class="rowNormal"
                    onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowTwo.html','_self');">
        <td>row 2 - cell 1</td>
        <td>row 2 - cell 2</td>
        <td>row 2 - cell 3</td>
      </tr>
      <tr id="row3" class="rowNormal"
                    onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowThree.html','_self');">
        <td>row 3 - cell 1</td>
        <td>row 3 - cell 2</td>
        <td>row 3 - cell 3</td>
      </tr>
    </table>
    
    <hr>
    
    Hex<br>
    <input type="checkbox" name="box1" value="1" id="hexBox1" onchange="toggleColor('#dd0000','#f0f0f0','row1');"><label for="hexBox1">row 1</label><br>
    <input type="checkbox" name="box2" value="2" id="hexBox2" onchange="toggleColor('#dd0000','#f0f0f0','row2');"><label for="hexBox2">row 2</label><br>
    <input type="checkbox" name="box3" value="3" id="hexBox3" onchange="toggleColor('#dd0000','#f0f0f0','row3');"><label for="hexBox3">row 3</label><br>
    
    <hr>
    
    Class<br>
    <input type="checkbox" name="box1" value="1" id="rgbBox1" onchange="toggleClass('rowSelected','rowNormal','row1');"><label for="rgbBox1">row 1</label><br>
    <input type="checkbox" name="box2" value="2" id="rgbBox2" onchange="toggleClass('rowSelected','rowNormal','row2');"><label for="rgbBox2">row 2</label><br>
    <input type="checkbox" name="box3" value="3" id="rgbBox3" onchange="toggleClass('rowSelected','rowNormal','row3');"><label for="rgbBox3">row 3</label><br>
    
    <hr>
    
    Check<br>
    <input type="checkbox" name="box1" value="1" id="chkBox1" onchange="switchColor((this.checked?'#dd0000':'#f0f0f0'),'row1');"><label for="chkBox1">row 1</label><br>
    <input type="checkbox" name="box2" value="2" id="chkBox2" onchange="switchColor((this.checked?'#dd0000':'#f0f0f0'),'row2');"><label for="chkBox2">row 2</label><br>
    <input type="checkbox" name="box3" value="3" id="chkBox3" onchange="switchColor((this.checked?'#dd0000':'#f0f0f0'),'row3');"><label for="chkBox3">row 3</label><br>
  
  </body>
</html>
Sonnige Grüße und ein schönes Wochenende
Tobias
1 mal bearbeitet
___________________________
Wichtig: mit cybton gegen AIDS kämpfen
"Ich will das Rad kein zweites mal erfinden,
ich will nur verstehen wie es funktioniert !"
09.05.2008 14:01 Uhr

 
bmk
Moderator
Status: offline
Naja, dass sich das gegenseitig behindert, ist ja nicht sonderlich überraschend. ;-)
Wenn du an einer Stelle die Hintergrundfarbe veränderst, und an einer anderen Stelle die Klasse, welche wiederum Angaben zur Hintergrundfarbe enthält, dann muss sich das zwangsläufig irgendwie überschneiden.

Am besten, du beschränkst dich auf eine Art, das zu bewerkstelligen - und ich würde vorschlagen, du nimmst die CSS-Klassen.

Mach rowNormal-on und rowNormal-off, und parallel dazu rowSelected-on und rowSelected-off. Oder halt was ähnliches, ich glaub, du weißt, was ich mein.

LG, bmk.
___________________________
Let's code responsibly...
Webcrawler -- Portal für Dirigenten -- Musikverein Königstetten
09.05.2008 16:24 Uhr

 
dragonl
Status: offline
Zitat von bmk:
Naja, dass sich das gegenseitig behindert, ist ja nicht sonderlich überraschend. ;-) [...]
Ja, stimmt schon, aber ich dachte das würde einfach überschrieben werden - aber dem ist wohl nicht so.

Zitat von bmk:
Am besten, du beschränkst dich auf eine Art, das zu bewerkstelligen - und ich würde vorschlagen, du nimmst die CSS-Klassen.
Vorschlag angenommen  :lol: 

@Herbx: Ich habe das jetzt alles neu gemacht, alles was geblieben ist - ist die "accessLink()" Funktion !
Doch dafür ist das Problem mit dem Markierungsverlust von dem ich vorhin schrieb behoben.
+ html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>RowHighlight</title>
    <style type="text/css">
      <!--
        table { border:1px solid #0f0f0f; background-color:#f0f0f0; }
        tr    { cursor:pointer; }
        
        .rowNormalOff { background-color:#f0f0f0; }    /* normal */
        .rowNormalOn  { background-color:#dd0000; }    /* normal und ausgewaehlt */
        .rowHoverOff  { background-color:#dddddd; }    /* hover */
        .rowHoverOn   { background-color:#ff0000; }    /* hover und ausgewaehlt */
        .rowPressed   { background-color:#ffffff; }    /* onClick */
      -->
    </style>
    <script type="text/javascript">
      <!--
        var normalOff = "rowNormalOff";
        var normalOn  = "rowNormalOn";
        var hoverOff  = "rowHoverOff";
        var hoverOn   = "rowHoverOn";
        var pressed   = "rowPressed";
        var oldClass;
        function toggleClass(TARGET_ID,CLASS){
                 var TARGET  = document.getElementById(TARGET_ID);
                 var clsName = TARGET.className;
                 if(!CLASS){
                    switch(clsName){
                           case normalOff: TARGET.className = hoverOff;  break;
                           case normalOn : TARGET.className = hoverOn;   break;
                           case hoverOff : TARGET.className = normalOff; break;
                           case hoverOn  : TARGET.className = normalOn;  break;
                           case pressed  : TARGET.className = (oldClass==hoverOn?normalOn:normalOff); break;
                           }
                    }
                    else{ oldClass = TARGET.className;
                          TARGET.className=pressed;
                         }
                 }
        function switchClass(CB_ID,TARGET_ID){
                 var TARGET = document.getElementById(TARGET_ID);
                 if(document.getElementById(CB_ID).checked)
                    TARGET.className = normalOn;
                    else TARGET.className = normalOff;
                 }
        function accessLink(URL,TARGET){
                 window.open(URL,TARGET);
                 }
      -->
    </script>
  </head>
  <body>
  
    <table>
      <tr id="row1" class="rowNormalOff"
                    onmouseover="toggleClass(this.id);"
                    onmouseout ="toggleClass(this.id);"
                    onclick    ="toggleClass(this.id,1);
                                 accessLink('./docRowOne.html','_self');">
        <td>row 1 - cell 1</td>
        <td>row 1 - cell 2</td>
        <td>row 1 - cell 3</td>
      </tr>
      <tr id="row2" class="rowNormalOff"
                    onmouseover="toggleClass(this.id);"
                    onmouseout ="toggleClass(this.id);"
                    onclick    ="toggleClass(this.id,1);
                                 accessLink('./docRowTwo.html','_self');">
        <td>row 2 - cell 1</td>
        <td>row 2 - cell 2</td>
        <td>row 2 - cell 3</td>
      </tr>
      <tr id="row3" class="rowNormalOff"
                    onmouseover="toggleClass(this.id);"
                    onmouseout ="toggleClass(this.id);"
                    onclick    ="toggleClass(this.id,1);
                                 accessLink('./docRowThree.html','_self');">
        <td>row 3 - cell 1</td>
        <td>row 3 - cell 2</td>
        <td>row 3 - cell 3</td>
      </tr>
    </table>
    <hr>
    
    Class<br>
    <input type="checkbox" name="box1" value="1" id="clsBox1" onchange="switchClass(this.id,'row1');"><label for="clsBox1">row 1</label><br>
    <input type="checkbox" name="box2" value="2" id="clsBox2" onchange="switchClass(this.id,'row2');"><label for="clsBox2">row 2</label><br>
    <input type="checkbox" name="box3" value="3" id="clsBox3" onchange="switchClass(this.id,'row3');"><label for="clsBox3">row 3</label><br>
    
  </body>
</html>
Man liest sich...
Tobias  :glad: 
___________________________
Wichtig: mit cybton gegen AIDS kämpfen
"Ich will das Rad kein zweites mal erfinden,
ich will nur verstehen wie es funktioniert !"
10.05.2008 04:32 Uhr

 
herbx
Status: offline
wow...that is very impressive!!! Thank you so much for doing that!!! THat is amazing!
THANK YOU...
I transfered 500 cydots as a little thank you note for all the work because it is really useful for me! Thank you again!
___________________________
I have been in the USA 4 8months
10.05.2008 14:02 Uhr

 
dragonl
Status: offline
Gern geschehen,
ich habe ja auch ein bisschen dabei gelernt  :glad: 

Vielen Dank für das Dankeschön  :lol: 
~Tobias
___________________________
Wichtig: mit cybton gegen AIDS kämpfen
"Ich will das Rad kein zweites mal erfinden,
ich will nur verstehen wie es funktioniert !"
Ähnliche Threads Forum Ähnlichkeitsgrad
 Ajax escapen Website & Webprogrammierung 1
 avachanger keine php unterstützung Website & Webprogrammierung 1
 Statistikscrip neubauen Website & Webprogrammierung 1
 [gelöst] Verschiedene Anzeigen in IE und Firefox? Website & Webprogrammierung 1
 Text in INPUT einfügen lassen Website & Webprogrammierung 1
 Formular Spiel (mit Javascript) Website & Webprogrammierung 1
 Probleme mit onclick Website & Webprogrammierung 1
nach obennach oben

Copyright © 2008 cybton-network

Google
Partner: #Musik - Dein Internetradio - nexem. - .wir machen news - Your-Book.net - Dein kostenloses Gästebuch
Anexia - PHP-Outsourcing - Dockers - s.Oliver Schuhe - Think Schuhe - Högl - Alpengluehen