coloration conditionnelle de bordures ?

**lediamant** · 17/06/2010, 22h23

Bonjour

J'ai une petite question concernant les bordures.

J'ai 10 lignes avec 5 cases dont 4 sont prédéfinies (les valeurs sont déjà inscrites et ne s'effacent pas). Quand je remplie la dernière case, je voudrais que les bordures de cette ligne soient rouge.
J'ai créé ce CSS suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
     .bordure  {
	            border-style: solid;
                    border-color: red;
                  }

Maintenant je voudrais savoir comment dire à mon programme que c'est par exemple la ligne 7 que j'ai rempli. Faut-il passer par une boucle for ??

Merci de votre aide

**SpaceFrog** · 18/06/2010, 08h22

10 lignes avec 5 cases

ligne = ? tr ??
case = ? td ??

tu parles de balise table ?

**lediamant** · 19/06/2010, 06h49

Envoyé par SpaceFrog

ligne = ? tr ??
case = ? td ??

tu parles de balise table ?

Non je n'ai pas de tr ni de td.
J'ai oublié de dire que je travaillais en javascript

**SpaceFrog** · 19/06/2010, 09h22

On a avancé... mais juste d'un poil ...

Ce n'est pas parce que tu travailles avec javascript, ce dont on se doute un peu puisque c'est ici le forum javascript, que l'on sait ce que sont tes lignes et tes cases ... (on peut tout a fait travailler en javascript avec de td et tr ...)

Le plus simple je pense serait que tu nous montres un bout de code

**lediamant** · 20/06/2010, 07h00

Envoyé par SpaceFrog

On a avancé... mais juste d'un poil ...

Ce n'est pas parce que tu travailles avec javascript, ce dont on se doute un peu puisque c'est ici le forum javascript, que l'on sait ce que sont tes lignes et tes cases ... (on peut tout a fait travailler en javascript avec de td et tr ...)

Le plus simple je pense serait que tu nous montres un bout de code

Voici mon code. Est-il possible quand la ligne sera valider et qu'elle aura les bordures en rouges; que les autres lignes disparaissent ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
     <head>        		
        <style type="text/css"> 
            .formelong{                               
			     background-color:yellow;
		             text-align: center;
		             font-weight: bold;
			     border-style: normal ;
		           }     
	     .forme {                             
                             text-align: center;
			     font-family: Arial;
                      }	               
          </style>
          <script type="text/javascript" language="javascript">
           function calcul(c,l)
             {
               diam_int=parseFloat(document.getElementById("c1-l"+l).value); 
               epais=parseFloat(document.getElementById("c2-l"+l).value);  
               long_tranchee=parseFloat(document.getElementById("c5-l"+l).value);  
               epais_fond=parseFloat(document.getElementById("c6-l"+l).value);  
               long_tra=parseFloat(document.getElementById("c10-l"+l).value); 
               if(isNaN(long_tra)) 
			       {
				     alert("Ce n'est pas un chiffre")  
				   }
 
               diam_ext=diam_int/100+(2*epais);  
               surf_tuyo=(diam_ext*diam_ext*3.14/4).toFixed(4);  
               haut_bloc=(diam_ext+epais_fond+0.2).toFixed(4); 
               surf_util=(long_tranchee*haut_bloc).toFixed(4); 
               surf_reel=(surf_util-surf_tuyo).toFixed(4); 
               vol_stab=(long_tra*surf_reel).toFixed(4); 
               document.getElementById("c3-l"+l).value=diam_ext; 
               document.getElementById("c4-l"+l).value=surf_tuyo;
               document.getElementById("c7-l"+l).value=haut_bloc;
               document.getElementById("c8-l"+l).value=surf_util;
               document.getElementById("c9-l"+l).value=surf_reel;
               document.getElementById("c11-l"+l).value=vol_stab;
             }
         </script>
     </head>
     <body>
      <form>
	<center>
        <input id="c1-l0" size="12" class="forme" value="diam.int.(cm)""><input id="c2-l0" size="12" class="forme"value="&eacute;pais.tuy.(m)"><input id="c3-l0" size="12" class="forme" value="diam.ext.(m)"><input id="c4-l0" size="12" class="forme" value="surf.ut.tuy.(m²)"><input id="c5-l0" size="12" class="forme" value="larg.tranc.(m)"><input id="c6-l0" size="12" class="forme" value="&eacute;pais.fond.(m)"><input id="c7-l0" size="12" class="forme" value="haut.bloc(m)"><input id="c8-l0" size="12" class="forme" value="surf.util.(m²)"><input id="c9-l0" size="12" class="forme" value="surf.r&eacute;el(m²)"><input id="c10-l0" size="12" class="formelong" class="forme" value="long.tranc.(m)"><input id="c11-l0" size="12" class="forme" value="vol.stab.(m³)"><br>
        <input id="c1-l1" onchange="calcul(1,1)"size="12"value="15" class="forme"><input id="c2-l1" onchange="calcul(2,1)"size="12"value="0.025" class="forme" ><input id="c3-l1" onchange="calcul(3,1)"size="12" class="forme"><input id="c4-l1" onchange="calcul(4,1)"size="12" class="forme"><input id="c5-l1" onchange="calcul(5,1)"size="12"value="0.95" class="forme"><input id="c6-l1" onchange="calcul(6,1)"size="12"value="0.15" class="forme"><input id="c7-l1" onchange="calcul(7,1)"size="12" class="forme"><input id="c8-l1" onchange="calcul(8,1)"size="12" class="forme" ><input id="c9-l1" onchange="calcul(9,1)"size="12" class="forme"><input id="c10-l1" onchange="calcul(10,1)"size="12"class="formelong"><input id="c11-l1" onchange="calcul(11,1)"size="12" class="forme"><br>
        <input id="c1-l2" onchange="calcul(1,2)"size="12"value="20" class="forme"><input id="c2-l2" onchange="calcul(2,2)"size="12"value="0.03" class="forme"><input id="c3-l2" onchange="calcul(3,2)"size="12" class="forme"><input id="c4-l2" onchange="calcul(4,2)"size="12" class="forme"><input id="c5-l2" onchange="calcul(5,2)"size="12"value="1" class="forme"><input id="c6-l2" onchange="calcul(6,2)"size="12"value="0.15"class="forme" ><input id="c7-l2" onchange="calcul(7,2)"size="12" class="forme"><input id="c8-l2" onchange="calcul(8,2)"size="12" class="forme"><input id="c9-l2" onchange="calcul(9,2)"size="12" class="forme"><input id="c10-l2" onchange="calcul(10,2)"size="12"class="formelong"><input id="c11-l2" onchange="calcul(11,2)"size="12" class="forme" ><br>
        <input id="c1-l3" onchange="calcul(1,3)"size="12"value="30" class="forme" ><input id="c2-l3" onchange="calcul(2,3)"size="12"value="0.04" class="forme"><input id="c3-l3" onchange="calcul(3,3)"size="12" class="forme"><input id="c4-l3" onchange="calcul(4,3)"size="12" class="forme"><input id="c5-l3" onchange="calcul(5,3)"size="12"value="1.1" class="forme"><input id="c6-l3" onchange="calcul(6,3)"size="12"value="0.15" class="forme"><input id="c7-l3" onchange="calcul(7,3)"size="12" class="forme"><input id="c8-l3" onchange="calcul(8,3)"size="12" class="forme"><input id="c9-l3" onchange="calcul(9,3)"size="12" class="forme"><input id="c10-l3" onchange="calcul(10,3)"size="12"class="formelong"><input id="c11-l3" onchange="calcul(11,3)"size="12" class="forme"><br>
        <input id="c1-l4" onchange="calcul(1,4)"size="12"value="40" class="forme"><input id="c2-l4" onchange="calcul(2,4)"size="12"value="0.05" class="forme"><input id="c3-l4" onchange="calcul(3,4)"size="12" class="forme"><input id="c4-l4" onchange="calcul(4,4)"size="12" class="forme"><input id="c5-l4" onchange="calcul(5,4)"size="12"value="1.2" class="forme"><input id="c6-l4" onchange="calcul(6,4)"size="12"value="0.15" class="forme"><input id="c7-l4" onchange="calcul(7,4)"size="12" class="forme" ><input id="c8-l4" onchange="calcul(8,4)"size="12" class="forme"><input id="c9-l4" onchange="calcul(9,4)"size="12" class="forme"><input id="c10-l4" onchange="calcul(10,4)"size="12"class="formelong"><input id="c11-l4" onchange="calcul(11,4)"size="12" class="forme"><br>
        <input id="c1-l5" onchange="calcul(1,5)"size="12"value="50" class="forme" ><input id="c2-l5" onchange="calcul(2,5)"size="12"value="0.06" class="forme"><input id="c3-l5" onchange="calcul(3,5)"size="12" class="forme"><input id="c4-l5" onchange="calcul(4,5)"size="12" class="forme"><input id="c5-l5" onchange="calcul(5,5)"size="12"value="1.3" class="forme"><input id="c6-l5" onchange="calcul(6,5)"size="12"value="0.15" class="forme"><input id="c7-l5" onchange="calcul(7,5)"size="12" class="forme"><input id="c8-l5" onchange="calcul(8,5)"size="12" class="forme"><input id="c9-l5" onchange="calcul(9,5)"size="12" class="forme"><input id="c10-l5" onchange="calcul(10,5)"size="12"class="formelong"><input id="c11-l5" onchange="calcul(11,5)"size="12" class="forme"><br>
        <input id="c1-l6" onchange="calcul(1,6)"size="12"value="60" class="forme"><input id="c2-l6" onchange="calcul(2,6)"size="12"value="0.07" class="forme"><input id="c3-l6" onchange="calcul(3,6)"size="12" class="forme"><input id="c4-l6" onchange="calcul(4,6)"size="12" class="forme"><input id="c5-l6" onchange="calcul(5,6)"size="12"value="1.4" class="forme"><input id="c6-l6" onchange="calcul(6,6)"size="12"value="0.15" class="forme"><input id="c7-l6" onchange="calcul(7,6)"size="12" class="forme"><input id="c8-l6" onchange="calcul(8,6)"size="12" class="forme"><input id="c9-l6" onchange="calcul(9,6)"size="12" class="forme"><input id="c10-l6" onchange="calcul(10,6)"size="12"class="formelong"><input id="c11-l6" onchange="calcul(11,6)"size="12" class="forme"><br>
        <input id="c1-l7" onchange="calcul(1,7)"size="12"value="70" class="forme"><input id="c2-l7" onchange="calcul(2,7)"size="12"value="0.08" class="forme"><input id="c3-l7" onchange="calcul(3,7)"size="12" class="forme"><input id="c4-l7" onchange="calcul(4,7)"size="12" class="forme"><input id="c5-l7" onchange="calcul(5,7)"size="12"value="1.5" class="forme"><input id="c6-l7" onchange="calcul(6,7)"size="12"value="0.15" class="forme"><input id="c7-l7" onchange="calcul(7,7)"size="12" class="forme"><input id="c8-l7" onchange="calcul(8,7)"size="12" class="forme"><input id="c9-l7" onchange="calcul(9,7)"size="12" class="forme"><input id="c10-l7" onchange="calcul(10,7)"size="12"class="formelong"><input id="c11-l7" onchange="calcul(11,7)"size="12" class="forme"><br>
        <input id="c1-l8" onchange="calcul(1,8)"size="12"value="80" class="forme"><input id="c2-l8" onchange="calcul(2,8)"size="12"value="0.09" class="forme"><input id="c3-l8" onchange="calcul(3,8)"size="12" class="forme"><input id="c4-l8" onchange="calcul(4,8)"size="12" class="forme"><input id="c5-l8" onchange="calcul(5,8)"size="12"value="1.6" class="forme"><input id="c6-l8" onchange="calcul(6,8)"size="12"value="0.15" class="forme"><input id="c7-l8" onchange="calcul(7,8)"size="12" class="forme"><input id="c8-l8" onchange="calcul(8,8)"size="12" class="forme"><input id="c9-l8" onchange="calcul(9,8)"size="12" class="forme"><input id="c10-l8" onchange="calcul(10,8)"size="12"class="formelong"><input id="c11-l8" onchange="calcul(11,8)"size="12" class="forme"><br>
        <input id="c1-l9" onchange="calcul(1,9)"size="12"value="90" class="forme"><input id="c2-l9" onchange="calcul(2,9)"size="12"value="0.1" class="forme"><input id="c3-l9" onchange="calcul(3,9)"size="12" class="forme"><input id="c4-l9" onchange="calcul(4,9)"size="12" class="forme"><input id="c5-l9" onchange="calcul(5,9)"size="12"value="1.7" class="forme" ><input id="c6-l9" onchange="calcul(6,9)"size="12"value="0.15" class="forme"><input id="c7-l9" onchange="calcul(7,9)"size="12" class="forme"><input id="c8-l9" onchange="calcul(8,9)"size="12" class="forme"><input id="c9-l9" onchange="calcul(9,9)"size="12" class="forme"><input id="c10-l9"onchange="calcul(10,9)"size="12"class="formelong"><input id="c11-l9" onchange="calcul(11,9)"size="12" class="forme"><br>
        <input id="c1-l10" onchange="calcul(1,10)"size="12"value="100" class="forme"><input id="c2-l10" onchange="calcul(2,10)"size="12"value="0.11" class="forme"><input id="c3-l10" onchange="calcul(3,10)"size="12" class="forme"><input id="c4-l10" onchange="calcul(4,10)"size="12" class="forme"><input id="c5-l10" onchange="calcul(5,10)"size="12"value="1.8" class="forme"><input id="c6-l10" onchange="calcul(6,11)"size="12"value="0.15" class="forme"><input id="c7-l10" onchange="calcul(7,10)"size="12" class="forme"><input id="c8-l10" onchange="calcul(8,10)"size="12" class="forme"><input id="c9-l10" onchange="calcul(9,10)"size="12" class="forme"><input id="c10-l10" onchange="calcul(10,10)"size="12"class="formelong"><input id="c11-l10" onchange="calcul(11,10)"size="12" class="forme"><br>
        <input id="c1-l11" onchange="calcul(1,11)"size="12"value="110" class="forme"><input id="c2-l11" onchange="calcul(2,11)"size="12"value="0.12" class="forme"><input id="c3-l11" onchange="calcul(3,11)"size="12" class="forme"><input id="c4-l11" onchange="calcul(4,11)"size="12" class="forme"><input id="c5-l11" onchange="calcul(5,11)"size="12"value="2" class="forme"><input id="c6-l11" onchange="calcul(6,11)"size="12"value="0.2" class="forme"><input id="c7-l11" onchange="calcul(7,11)"size="12" class="forme"><input id="c8-l11" onchange="calcul(8,11)"size="12" class="forme"><input id="c9-l11" onchange="calcul(9,11)"size="12" class="forme"><input id="c10-l11" onchange="calcul(10,11)"size="12"class="formelong"><input id="c11-l11" onchange="calcul(11,11)"size="12" class="forme"><br>
        <input id="c1-l12" onchange="calcul(1,12)"size="12"value="120" class="forme"><input id="c2-l12" onchange="calcul(2,12)"size="12"value="0.13" class="forme"><input id="c3-l12" onchange="calcul(3,12)"size="12" class="forme"><input id="c4-l12" onchange="calcul(4,12)"size="12" class="forme"><input id="c5-l12" onchange="calcul(5,12)"size="12"value="2.1" class="forme"><input id="c6-l12" onchange="calcul(6,12)"size="12"value="0.2" class="forme"><input id="c7-l12" onchange="calcul(7,12)"size="12" class="forme"><input id="c8-l12" onchange="calcul(8,12)"size="12" class="forme"><input id="c9-l12" onchange="calcul(9,12)"size="12" class="forme"><input id="c10-l12" onchange="calcul(10,12)"size="12"class="formelong"><input id="c11-l12" onchange="calcul(11,12)"size="12" class="forme"><br><br>
 
	    Entrez une longueur de tranch&eacute;e (cadre jaune) pour voir les r&eacute;sultats <br><br>	
          <input type="reset" value="Effacer"> 
	 </center>
        </form>
     </body> 
 </html>

Merci en tout cas pour l'aide

coloration conditionnelle de bordures ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager