Style dynamique / Impression Auto / Fermeture Popup

Alnoss · 15-09-2010 10:14:58

Coucou,

Vu que le JS n'est pas trop ma tasse de thé, je m'en réfère à vous
En fait, je souhaiterais qu'une cellule de mon tableau réagisse en fonction de si SA checkbox est cochée ou pas (passage de la couleur bleu à la couleur rouge du background).
J'ai donc pondu cela ... mais je pense avoir un conflit entre le CSS et le JS (vu que je défini 2 fois le bgcolor) [Je précise que j'ai tenté d'oter le "doublon" dans le CSS, sans succès]

Dans ma page CSS

.access {border: solid #000000 2px; background-color:#66FFFF; height:30px; width:170px;}

.style4 {font-size: 16px; font-weight:bold; color:#000}

.style4_ {font-size: 16px; font-weight:bold; color:#66FFFF}

.label {font-size:12px; font-weight: bold;}

Dans ma page du formulaire :

<script>

function change(moi) {

if (document.validation_reception.elements[moi].checked == true)

        {document.getElementById(moi).style.backgroundColor = '#FF0000';}

else

        {document.getElementById(moi).style.backgroundColor = 'transparent';}

}

</script>

<form name="validation_reception" method="post" action="fonctions.php?fct=recok">

<table width="100%" border="0" cellspacing="5" cellpadding="2">

  <tr>

  <td>

      <table class="access">

        <tr>

          <td>

            <label>

               <input type="checkbox" name="access01" onClick="change(this.name)"/>

               <span class="style4"> Antenne Ext </span><span class="style4_">_____</span>

            </label>

          </td>

        </tr>

      </table>

    </td>

  </tr>

...

...

</table>

</form>

Merci d'avance

ManicoW · 15-09-2010 11:02:10

Plop

Question du jour : et ca fait quoi, du coup ? Rien ? autre ?

Pierrot · 15-09-2010 11:05:32

c'est l'bordel :D:D

getElementById(moi) ??????????

toi toi, tu fais pas un peu de nombrilisme ?? :D

en fait, je ne vois pas dans le html de id="toi" ou autre chose d'ailleur

aller, d'autre conseils :
remplace onClick="change(this.name)" par onClick="change(this)"

et dans la fonction tu fais pas de getElementByID mais moi.qqchose

et tu as bien compris que dans ta function tu changes la couleur du check pas de la cellule !!!

enfin, avec jquery, c'est une ligne de code :D

a++

ManicoW · 15-09-2010 11:09:06

rah, je suis bete, j'aurai dut le voir

        {document.getElementById(moi).style.backgroundColor = '#FF0000';}

Il a pas d'id a ma connaissance ton element la

De plus, si la checkbox avait cet id, c'est son fond a elle qui changerai. Donc forcément, ca ne fonctionnerait pas.

Perso j'aurai tendance a coller un id a la cellule (ou a la ligne, selon ce que tu veux), genre access01ligne , et un id a la checkbox, genre access01 (tu peux mettre le name pareil, mais il faut l'id si tu veux simplifier).

Ensuite ta fonction peut passer en

function change(moi) {

if (document.getElementById(moi).checked == true)

        {document.getElementById(moi+'ligne').className="taclasserouge"}

else

        {document.getElementById(moi+'ligne').className="taclassejesaisplusquoi"}

}

En changeant la classe carrément, tu pourra changer plusieurs style (si un jour tu veux la bordure aussi )

Enfin c'est ma vision hein

Bon courage

ManicoW · 15-09-2010 11:11:56

Pierrot a écrit :

aller, d'autre conseils :
remplace onClick="change(this.name)" par onClick="change(this)"
et dans la fonction tu fais pas de getElementByID mais moi.qqchose

J'y pensais aussi, mais vu qu'a priori c'est un élément parent qu'il doit changer, va falloir qu'il passe une info a partir de laquelle il peut remonter ou "cibler" comme il veut

Connait pas jquery par contre, trop fainéant pour sortir une grosse lib quand j'ai pas grand chose a affecter (en général j'ai pas plus de 3 éléments qui changent dans le genre sur une page )

Pierrot · 15-09-2010 11:24:02

manicow->
l’accès au parent est simple avec parentNode en JS

et si Allnoos le demande, je lui montre un exemple avec jquery

a++

Alnoss · 15-09-2010 11:47:50

@ Manicow : effectivement, ça ne fait rien ...
@ Pierrot : parentNode ?? gné ?? (jquery ?? je sens qu'il va mal passer ^^)

Pour info, j'ai 25 checkbox... je n'en ai mis qu'une pour l'exemple

Pour une fois que je m'essaye au JS, ni ça, ni mon verificateur de champs ne fonctionne ....

Qui a dit "récalcitrant" ?? ^^

Bref, je teste cela à 14h et je reviens

Mici !!!!!!!

Maljuna Kris · 15-09-2010 12:12:34

Saluton,
Il est vrai qu'appeler une fonction JS en lui passant comme paramètre this.name et prendre cette valeur pour faire une recherche par getElementById(), ça fait désordre.

Alnoss · 15-09-2010 13:34:10

Bon, j'ai fait quelques modifs et je donne le mode complet :

P.S : le but est de changer le style de la cellule dans laquelle se trouve le checkbox
L'idée : la cellule est bleu, et lorsqu'on coche le checkbox, elle devient rouge.. le texte (Style4_0 a l'intérieur change aussi de couleur...)

Dans ma page CSS

.access0 {border: solid #000000 2px; background-color:#66FFFF; height:30px; width:170px;} // style cellule pas cochée

.access1 {border: solid #000000 2px; background-color:#FF0000; height:30px; width:170px;} // style cellule cochée

.style4 {font-size: 16px; font-weight:bold; color:#000} // style du texte

.style4_0 {font-size: 16px; font-weight:bold; color:#66FFFF} // style des ___ pour meme couleur access0

.style4_1 {font-size: 16px; font-weight:bold; color:#FF0000} // style des ___ pour meme couleur access1

.label {font-size:12px; font-weight: bold;}

Dans ma page du formulaire :

<script>

function checkrequired(which){

var pass=true

if (document.images){

for (i=0;i<which.length;i++){

var tempobj=which.elements[i]

if (tempobj.name.substring(0,8)=="required"){

if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){

pass=false

break}}}}

if (!pass){alert("Certaines cases de ce formulaire sont obligatoires, merci de bien vouloir les remplir")

return false}

else

return true}

</script>

<!-- -->

<script>

function change(stylecase) {

if (document.validation_reception.elements[stylecase].checked == true)

        {document.getElementById(stylecase).className="access1".style="style4_1"} 

// pas compris l'histoire du "moi.quelquechose"... quelquechose, c'est ???

else

        {document.getElementById(stylecase).className="access0".style="style4_0"} 

// pas compris l'histoire du "moi.quelquechose"... quelquechose, c'est ???

}

</script>

<form name="validation_reception" method="POST" action="fonctions.php?fct=recok" onSubmit="return checkrequired(this)">

<table width="63%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><fieldset style="width:370px; height:175px">

      <legend> Client </legend>

      <table width="100%" border="0" align="center" cellpadding="1" cellspacing="5">

        <tr>

          <td align="left" class="style4">Nom</td>

          <td align="left"><input type="text" id="nom" name="requiredNOM" value="<?php echo $row['nom'];?>" size="41"/></td>

        </tr>

        <tr>

          <td align="left" class="style4">Adresse</td>

          <td align="left"><input type="text" id="adresse" name="adresse" value="<?php echo $row['adresse'];?>" size="41"/></td>

        </tr>

        <tr>

          <td>

            <label>

               <input type="checkbox" id="access01" name="access01" onClick="change(this)"/>

               <span class="style4"> Antenne Ext </span><span class="style4_">_____</span> 

/* la modif style ne doit agir que sur style4_ */

            </label>

          </td>

        </tr>

        <tr>

          <td>

            <label>

               <input type="checkbox" id="access02" name="access02" onClick="change(this)"/>

               <span class="style4"> Stylet </span><span class="style4_">______</span> 

/* la modif style ne doit agir que sur style4_ */

            </label>

          </td>

        </tr>

      </table>

    </td>

  </tr>

...

...

</table>

</form>

vu que j'ai viré le class=access, je n'ai plus de style ... donc plus rien qui ne s'affiche, en dehors du texte...
en gros, aucun appel aux style access0 et access1.

Par ailleurs, j'ai rajouté mon vérificateur de champs (qui ne fonctionne pas non plus) et qui devrait bloquer si le champs nom (requiredNOM) est vide... sauf qu'il ne fait pas non plus son taf

Bref, je modifie... mais je ne vois pas encore où ça plante...

Pierrot · 15-09-2010 13:40:12

j'ai attrapé mal a la tête avec d'arriver a la fin :D

>>document.validation_reception.elements[stylecase].checked == true
c'est quoi çà ????????????????

il fo mette stylecase.checked puisque que tu envoie le this

j'te dis que ça fais pas plus de 3 lignes en JQUERY.:rolleyes:

a++

Alnoss · 15-09-2010 13:51:14

si en jquery, c'est abordable, je suis preneur ... mais tu connais mes compétences en JS ^^

Pierrot · 15-09-2010 15:55:52

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

        <title>test2alnoss</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style>

            .white { background:white; }

            .yellow { background:yellow; }

        </style>

    </head>

    <body>

        <table id="mytable" border="1" style="width: 200px">

            <col />

            <tbody>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek1</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek2</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek3</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek4</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek6</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek7</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek8</td>

                </tr>

            </tbody>

        </table>

        <script>

            $(document).ready(function() {

                $(".mycheckamoi").change(function() {

                    $(this).parent('td').toggleClass('yellow');

                });

            });

        </script>

    </body>

</html>

voilou

tu n'as rien a télécharger

bonne lecture
a++

Pierrot · 15-09-2010 15:57:27

tu as vu qu'en JS y a vraiment rien
si tu veux des explications, je suis tout à toi

[code = javascript]
<script>
$(document).ready(function() {
$(".mycheckamoi").change(function() {
$(this).parent('td').toggleClass('yellow');
});
});
</script>
[/code]

Alnoss · 15-09-2010 17:23:20

re,
en fait, je vais devoir le télécharger en local car c'est une appli INTRANET dont certains postes n'ont pas accès au web
mais ceci n'est qu'une liaison... je m'attache à ton script et je reviens pleurer ^^ quoique vu l'heure, je vais rentrer ....

La suite demain

[P.S : en attendant, un grand merci !!! toujours là quand le JS se fait pressant - faudra d'ailleurs que je t'embêtes pour un autre soucis d'impression,
mais ceci est une autre histoire un autre topic à venir ]

Par contre, je ne vois pas où tu appelles le style White !!!

xTG · 15-09-2010 19:34:00

Tu vois que tu es loin d'être naab en JS Alnoss ! T'as vu tout de suite qu'il avait oublié le retour à la normale du style.

Pierrot · 15-09-2010 20:24:18

>>Tu vois que tu es loin d'être naab en JS Alnoss ! T'as vu tout de suite qu'il avait oublié le retour à la normale du style.

qui a oublié quoi ?????:|
essaye et tu verra que rien n'est oublié

a++

Pierrot · 15-09-2010 21:48:38

Xtg à raison
il manquai un pti qqchose :D
je remet le script a jour et complet
cette fois ci, il ne manque rien
[code = javascript]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test2alnoss</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
.white { background:white; }
.yellow { background:yellow; }
</style>
</head>

<body>

</body>
</html>

[/code]

a++

Pierrot · 15-09-2010 22:01:45

je remet le script JS seul et le le commente.

<script type="text/javascript">

$(document).ready(function(){//quand le DOM est prêt

    $('#mytable td').each(function(){

        //recherche de tous les td de la table ayant l'id "mytable"

        $(this).addClass(function(){ 

           //ajout de la class dans les enfants de type input checkbox->

           return ($(this).children('input=checkbox').attr('checked')==true) ? 'yellow' : 'white'

           //white si pas coché ou yellow si cochée

        })

    });

    $(".mycheckamoi").change(function() {

       // gestion de l’évènement change dans tous les éléments de la class "mycheckamoi"

       $(this).parent('td').toggleClass(function(){

            //swap 'yellow' en 'white' ou  'white' en 'yellow'

            return ($(this).attr('checked')==true) ? 'yellow white' : 'white yellow';

        });

    });

});

</script>

remarquez bien que dans le code HTML j'ai coché le check1 (1er) et le check8 (dernier) a qui sera donc ajouter la class "yellow" par le script et tous les autres td se verrons ajouter la class "white" par le même script

j’espère que vous m'avez compris parce que, c'est tout simple :D

j'ai testé ce script et il fonctionne parfaitement.

@++

Alnoss · 16-09-2010 07:40:39

bon, je viens de mettre en lumière un petit soucis..

Ton script fonctionne parfaitement tel qu'il est là... je l'ai testé en dehors de mon script sur un simple fichier html.
Sauf qu'a des fins d'ergonomie, j'ai fait en sorte que lorsque l'on clique sur le texte a coté de la checkbox, cela puisse la cocher aussi.
Cela est possible en encadrant par <label> </label> l'input + le texte tel que

        <table id="mytable" border="1" style="width: 200px">

            <col />

            <tbody>

                <tr>

                    <td><label><input class="mycheckamoi" name="check" type="checkbox" />chek1</label></td>

                </tr>

...

Et là, ça ne fonctionne plus (la colorisation) [toujours dans le simple HTML].....

Une idée ???

Pierrot · 16-09-2010 09:49:33

nan, pas de label

evenement click sur le td et trigger sur le checkbox

normalement, en regardant le script existant, tu as toutes les billes
mais bon,si tu ne comprends pas, demande

a++

Alnoss · 16-09-2010 11:08:45

rhooooo.... tu ne m'as pas lu !!!

Je sais que sur ton exemple, il n'y a pas de label..... sauf que pour mon ergonomie (cliquer sur les textes coche la checkbox, car les users trouvent la checkbox trop petite), j'ai besoin du label... (si tu veux tester l'effet, introduit le label comme dans mon post.. et clique sur le texte )

Si tu arrives à me sortir une solution où la case entière est cliquable (avec pour effet de cocher la checkbox) : je prends ^^... mais pour l'instant, je n'ai trouvé que cette parade

Pierrot · 16-09-2010 11:23:59

ouaaaaaaaaahhhhhhhhh
c'est toi qui ne m'as pas lu !!!

je te dis que tu n'as pas besoin de label ::rolleyes:

je me recite :
evenement click sur le td et trigger sur le checkbox

si tu ne comprend pas, demande plus d'explication.

pourquoi mettre un label alors qu'il n'y a pas besoin de label ????
pour alourdir ??

si tu veux que ça ouille ouille ouille plus vite, donne moi ton adresse msn
t'auras l'info presque en temps réel

a++

Alnoss · 16-09-2010 13:07:28

effectivement, c'est la ligne "evenement click sur le td et trigger sur le checkbox" que je n'ai pas compris ^^

Pour le msn, j'ai reçu ton invit à midi ...mais je ne l'ai pas au taf donc on l'a fait "slowly" ^^

Pierrot · 16-09-2010 16:32:29

voilou, encore de la lecture

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

        <title>test2alnoss</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style>

            .unselect { background:#CCCCFF; }

            .select { background:#3366FF; }

        </style>

    </head>

    <body>

        <table id="mytable" border="0" style="width: 200px">

            <col />

            <tbody>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" checked="checked" />chek1</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek2</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek3</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek4</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek5</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek6</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" />chek7</td>

                </tr>

                <tr>

                    <td><input class="mycheckamoi" name="check" type="checkbox" checked="checked" />chek8</td>

                </tr>

            </tbody>

        </table>

        <script type="text/javascript">

            $(document).ready(function(){   

                $(".mycheckamoi").change(function(e){

                    $(this).parent('td').toggleClass(function(){

                        return ($(this).attr('checked')===true) ? 'select unselect' : 'unselect select';

                    });

                    e.stopPropagation();

                }).click(function(e){

                    e.stopPropagation();

                });

                 $('#mytable td').each(function(){

                    $(this).addClass(function(){

                        return ($(this).children('input=checkbox').attr('checked')==true) ? 'select' : 'unselect'

                    })

                }).click(function(e){

                    var check=$(this).children('input=checkbox');

                    check.attr('checked',check.is(':checked')?false:true);

                    check.trigger('change');

                    e.stopPropagation();

                });

            });

        </script>

    </body>

</html>

bon courage.
a++

Pierrot · 16-09-2010 19:55:22

le script seul, c'est plus lisible

<script type="text/javascript">

   $(document).ready(function(){  

     $(".mycheckamoi").change(function(e){

         $(this).parent('td').toggleClass(function(){

             return ($(this).attr('checked')===true) ? 'select unselect' : 'unselect select';

         });

         e.stopPropagation();

     }).click(function(e){

         e.stopPropagation();

     });

      $('#mytable td').each(function(){

         $(this).addClass(function(){

             return ($(this).children('input=checkbox').attr('checked')==true) ? 'select' : 'unselect'

         })

     }).click(function(e){

         var check=$(this).children('input=checkbox');

         check.attr('checked',check.is(':checked')?false:true);

         check.trigger('change');

         e.stopPropagation();

     });

  });

 </script>

@++

PHP|Débutant :: Forums

Advertisement

#1 15-09-2010 10:14:58

Style dynamique / Impression Auto / Fermeture Popup

#2 15-09-2010 11:02:10

Re : Style dynamique / Impression Auto / Fermeture Popup

#3 15-09-2010 11:05:32

Re : Style dynamique / Impression Auto / Fermeture Popup

#4 15-09-2010 11:09:06

Re : Style dynamique / Impression Auto / Fermeture Popup

#5 15-09-2010 11:11:56

Re : Style dynamique / Impression Auto / Fermeture Popup

#6 15-09-2010 11:24:02

Re : Style dynamique / Impression Auto / Fermeture Popup

#7 15-09-2010 11:47:50

Re : Style dynamique / Impression Auto / Fermeture Popup

#8 15-09-2010 12:12:34

Re : Style dynamique / Impression Auto / Fermeture Popup

#9 15-09-2010 13:34:10

Re : Style dynamique / Impression Auto / Fermeture Popup

#10 15-09-2010 13:40:12

Re : Style dynamique / Impression Auto / Fermeture Popup

#11 15-09-2010 13:51:14

Re : Style dynamique / Impression Auto / Fermeture Popup

#12 15-09-2010 15:55:52

Re : Style dynamique / Impression Auto / Fermeture Popup

#13 15-09-2010 15:57:27

Re : Style dynamique / Impression Auto / Fermeture Popup

#14 15-09-2010 17:23:20

Re : Style dynamique / Impression Auto / Fermeture Popup

#15 15-09-2010 19:34:00

Re : Style dynamique / Impression Auto / Fermeture Popup

#16 15-09-2010 20:24:18

Re : Style dynamique / Impression Auto / Fermeture Popup

#17 15-09-2010 21:48:38

Re : Style dynamique / Impression Auto / Fermeture Popup

#18 15-09-2010 22:01:45

Re : Style dynamique / Impression Auto / Fermeture Popup

#19 16-09-2010 07:40:39

Re : Style dynamique / Impression Auto / Fermeture Popup

#20 16-09-2010 09:49:33

Re : Style dynamique / Impression Auto / Fermeture Popup

#21 16-09-2010 11:08:45

Re : Style dynamique / Impression Auto / Fermeture Popup

#22 16-09-2010 11:23:59

Re : Style dynamique / Impression Auto / Fermeture Popup

#23 16-09-2010 13:07:28

Re : Style dynamique / Impression Auto / Fermeture Popup

#24 16-09-2010 16:32:29

Re : Style dynamique / Impression Auto / Fermeture Popup

#25 16-09-2010 19:55:22

Re : Style dynamique / Impression Auto / Fermeture Popup

Pied de page des forums