personnaliser une ligne dans un tableau en javaScript

**Boss38400** · 10/03/2012, 22h25

Bonsoir voila ma question
comment peut on modifier la couleur et le text d'une ligne de tableau html selon la condition de la checkbox coché ou non
1. au chargement évaluer la valeur de la checkbox
1.1 si valeur est true la checkbox est coché .
1.2 si la valeur est false la checkbox n'est pas coché et la ligne est grisé et le text aussi

voila mon code de test de js :

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
<script type="text/javascript" language="javascript" charset="utf-8">
function Chargement(){
var list = document.getElementsByName("some_name");
for(var i=0;i<list.length;i++){
 
if(list[i].value=="true"){
list[i].checked=1
}
else{
// TODO: mettre la ligne en gris (effet désactivé en gros )
}
 
}
 
}
	</script>

le html

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
<body onload="Chargement();" >
<form id="formulaire" action="" method="get">
 
<table >
   <caption>Passagers du vol 377</caption>
 
   <tr>
       <th>Nom</th>
       <th>Age</th>
       <th><input type="checkbox" name="some_name" value="true"  /></th>
   </tr>
   <tr >
       <td>Carmen</td>
       <td>33 ans</td>
       <td><input  type="checkbox" name="some_name" value="false" /></td>
   </tr>
   <tr  >
       <td>Michelle</td>
       <td>26 ans</td>
       <td><input type="checkbox" name="some_name" value="true"  /></td>
   </tr>
</table>
	<p><input type="submit" value="Continue &rarr;"  /></p>
</form>
 
</body >

**Rachel** · 11/03/2012, 01h31

Bonsoir

Code :

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

document.getElementsByTagName('table')[0].getElementsByTagName('tr')[i].style.backgroundColor

correspond à la couleur de fond de chaque ligne de ton tableau. i correspond à la valeur dans la boucle for.
Pour ce qui est du texte, tu peux faire comme ceci :

Code :

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

document.getElementsByTagName('table')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[j].innerHTML

j est la valeur de la case de la ligne courante que tu veux modifier.

**Boss38400** · 11/03/2012, 12h25

j'ai testé ta solution . elle marche merci mais finalement en lisant quelque tuto sur le net.j'ai découvert le mot clé "parentElement" .je poste ma solution au cas ou

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
 function chargement(){
 
var list = document.body.getElementsByTagName('input');
for(var i=0;i<list.length;i++){
if(list[i].getAttribute('type')=='checkbox' && list[i].parentElement.nodeName !="TH"){
if(list[i].value=="true"){
list[i].checked=1
}
else{
var col_on = '#D8DCDB';
var colorText='#8E8E8E';
list[i].parentElement.parentElement.style.background = col_on;
list[i].parentElement.parentElement.style.color = colorText;
}
 
}
}
}

personnaliser une ligne dans un tableau en javaScript

JavaScript

Discussions similaires

Partager

Partager