Discussion :

[Antoine13]

Bonjour,

Je fait un tableau (10x10 cases) dans lequel on peut mettre des 1 ou des 0 ou rien le tableau est composé (extrait):

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P000" value="'.$P[0][0][0].'"  onchange="this.value=this.value.trim()" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P001" value="'.$P[0][0][1].'"  onchange="this.value=this.value.trim()" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P002" value="'.$P[0][0][2].'"  onchange="this.value=this.value.trim()" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P003" value="'.$P[0][0][3].'"  onchange="this.value=this.value.trim()" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
 
......................

Je peux mettre des Id sur chaque input s’il le faut. L’ensemble est géré par PHP et enregistré au fur et à mesure des clicks (ajax)

Malgré mes recherches je n’ai pas trouvé de script pour m’aider et je n'arrive pas le faire


Serait-il possible que :


Lorsque je click dans une case :
-- S’il n’y a rien un 1 doit s’inscrire avec un fond vert
-- S’il y a un 1 un 0 doit s’inscrire avec un font rouge
-- S’il y a un 0 rien ne s’inscrit avec un fond transparent

Merci pour vos réponses

[Doksuri]

salut, c'est un truc comme ca que tu veux ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table>
<td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P001" value="'.$P[0][0][0].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P002" value="'.$P[0][0][1].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
        <input autocomplete="off"  onPaste="return false" class="formulaire_Center" type="text" name="P003" value="'.$P[0][0][2].'" size="1" maxlength="1" />
        </div></td>
        <td width="20%" ><div align="center">
</table>

Code css :

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

1
2
.green { background-color: green; }
.red { background-color: red; }

Code javascript :

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
document.querySelectorAll('input').forEach(input => {
updateBackground(input);
input.addEventListener('click', updateValue);
});
 
function updateBackground(input) {
input.classList.remove('red');
input.classList.remove('green');
if(parseInt(input.value) === 1) {
input.classList.add('green');
}
if(parseInt(input.value) === 0) {
input.classList.add('red');
}
}
 
function updateValue() {
if(parseInt(this.value) === 0) {
this.value = '';
updateBackground(this);
return;
}
 
if(!parseInt(this.value)) {
this.value = 1;
updateBackground(this);
return;
}
 
if(parseInt(this.value) === 1) {
this.value = 0;
updateBackground(this);
return;
}
 
}

[Antoine13]

Merci pour votre réponse

CHAPEAU ! Merci

J’aurai jamais pu trouver.

Cela fonctionne parfaitement après de petites adaptations afin que l’ensembles des scripts se marient parfaitement.
En effet j’avais des B Radio qui pouvait prendre 1 comme valeur et au click, hop, ils étaient à 0.

Mais rien d’important.

Je verrai à l’usage mais cela devrai fonctionner

Encore une grand merci.

Bon bout d’an.

Antoine