personnaliser une ligne dans un tableau en javaScript

Version imprimable

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:

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:

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 >

11/03/2012, 00h31
Rachel

Bonsoir :)

Code:

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:

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.

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:

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;
}
 
}
}
}