Toon posts:

[JS] <TD> background veranderen bij klikken cb

Pagina: 1
Acties:

zaterdag 18 mei 2002 02:42

Acties:
  • Mindwalker
  • Registratie: Februari 2001
  • Laatst online: 26-05 22:36

Mindwalker

zappen is zinloos

Topicstarter
Dit onderwerp is al in verschillende varianten langsgekomen, maar ondanks dat kom ik er niet achter hoe het precies werkt.

Het probleem is als volgt: ik wil de achtergrondkleur van een cel van kleur doen veranderen als men de checkbox in die cel aanvinkt. Net zoals bij Hotmail. De code zoals ik hem nu heb is als volgt (met dank aan het scriptje van Pelle in dit topic):
code:
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

<HTML>
<HEAD>
<TITLE>Blaat</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
    function changeBg(cellName) {
        
        var cellColor;
        
        if (box1.checked) {
        cellColor = '#CCCCCC';
        }
        else {
        cellColor = '#FFFFFF';
        }
        
        if (document.all) {
             document.all[cellName].bgColor = cellColor;
        }
    }
// -->
</SCRIPT> 
</HEAD>

<BODY>
<TABLE ALIGN=CENTER CELLPADDING=10 BORDER=1 WIDTH=780>
    
<TR>
    <TD ID="cell1">
        <FORM>
        <INPUT NAME="box1" TYPE=CHECKBOX ONCLICK="changeBg('cell1')">
            Vink aan!</FORM></TD>
    
</TR>
</TABLE></BODY></HTML>

Het principe is dat ik aan de hand van de checkbox wil controleren wat de kleur van de achtergrond moet worden. Zoals het nu is, kent IE de checkbox niet. Ik kan hem wel werkend krijgen zodat de achtergrond van kleur veranderd, maar helaas lukt het niet meer terug :? Ik ben er van overtuigd dat de oplossing vrij simpel is, maar vanwege het tijdstip gaat het denken niet echt helder :z

I know I'm dead on the surface, but I am screaming underneath

zaterdag 18 mei 2002 02:51

Acties:
  • Mindwalker
  • Registratie: Februari 2001
  • Laatst online: 26-05 22:36

Mindwalker

zappen is zinloos

Topicstarter
Woeiii, ik heb hem al.

De regel met box1 moest natuurlijk zijn:

if (document.all.box1.checked) {

Hmm, sorry.. nevermind! 't Is gewoon bedtijd :D Shaaaaame

I know I'm dead on the surface, but I am screaming underneath

zaterdag 18 mei 2002 12:38

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 20:21

crisp

Devver

Pixelated

Dit is wel weer een heel erge IE-only oplossing; met wat kleine veranderingen werkt het ook in Mozilla en NS6:
code:
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

<HTML>
<HEAD>
<TITLE>Blaat</TITLE>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
    function changeBg(cellName) {
        
        var cellColor;
        
        if (document.forms['form1'].elements['box1'].checked) {
        cellColor = '#CCCCCC';
        }
        else {
        cellColor = '#FFFFFF';
        }
        
        if (document.getElementById) {
             document.getElementById(cellName).style.backgroundColor = cellColor;
        } else if (document.all) {
             document.all[cellName].style.backgroundColor = cellColor;
        }
    }
// -->
</SCRIPT> 
</HEAD>

<BODY>
<TABLE ALIGN=CENTER CELLPADDING=10 BORDER=1 WIDTH=780>
    
<TR>
    <TD ID="cell1">
        <FORM NAME="form1">
        <INPUT NAME="box1" TYPE=CHECKBOX ONCLICK="changeBg('cell1')">
            Vink aan!</FORM></TD>
    
</TR>
</TABLE></BODY></HTML>

Intentionally left blank

zaterdag 18 mei 2002 17:34

Acties:

Verwijderd

Pas het nog iets meer aan en het werkt ook in Netscape 4 ...

<HTML>
<HEAD>
<TITLE>Blaat</TITLE>

<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--
function changeBg(box,cellName)
{
if(box.checked){
cellColor = '#CCCCCC';
}
else {
cellColor = '#FFFFFF';
}
if (document.getElementById) {
document.getElementById(cellName).style.backgroundColor = cellColor;
} else if (document.all) {
document.all[cellName].style.backgroundColor = cellColor;
} else if (document.layers) {
document.layers[0].document.layers[0].bgColor = cellColor;
}
}
// -->
</SCRIPT>

</HEAD>
<BODY>

<TABLE ALIGN=CENTER BORDER=1 WIDTH=780 HEIGHT=50><TR><TD ID="cell1">
<ILAYER><LAYER WIDTH=780 HEIGHT=50>

<FORM>
<INPUT TYPE="CHECKBOX" onclick="changeBg(this,'cell1')">Vink aan!
</FORM>

</LAYER></ILAYER>
</TD></TR></TABLE>

</BODY>
</HTML>

zaterdag 18 mei 2002 17:44

Acties:
  • prototype
  • Registratie: Juni 2001
  • Niet online

prototype

Cheer Bear

Pas het even aan en het is alweer een stuk leesbaarder ;)
code:
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

<html>
    <head>
        <title>Blaat</title>

        <script language="JavaScript1.2" type="text/javascript">
        <!--
            function changeBg (box,cellName) {
                if(box.checked){
                    cellColor = '#CCCCCC';
                } else {
                    cellColor = '#FFFFFF';
                }
    
                if (document.getElementById) {
                    document.getElementById(cellName).style.backgroundColor = cellColor;
                } else if (document.all) {
                    document.all[cellName].style.backgroundColor = cellColor;
                } else if (document.layers) {
                    document.layers[0].document.layers[0].bgColor = cellColor;
                }  
            }
        // -->
        </script>

    </head>

    <body>
        <table align="center" border="1" width="780" height="50">
            <tr>
                <td id="cell1">
                    <ilayer>
                        <layer width="780" height="50">
                            <form>
                                <input type="checkbox" onclick="changeBg (this,'cell1');">Vink aan!
                            </form>

                        </layer>
                    </ilayer>
                </td>
            </tr>
        </table>
    </body>
</html>

zaterdag 18 mei 2002 19:37

Acties:

Verwijderd

Pas het nog even aan en het draait in MS DOS :P
Pagina: 1
Reageer