Réduire le nombre de fonctions

Bonjour;

Pour changer la couleur des cellules j'ai fait 2 fonctions.
pour le moment j'ai 2 cellules avec un identifiant 'c1' et 'c2' (et plus par la suite)
quand je clique sur la cellule id='c1', j'appelle une fonction qui change la couleur bgcolor de c1 et de c2
quand je clique sur la cellule id='c2' j'appelle une autre fonction qui elle aussi change la couleur bgcolor de c1 et de c2.
Je voudrais savoir comment je peut ne faire qu'une fonction sachant que je vais avoir 10 ou 11 cliquable et donc qui changeront de couleur.

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script Language="Javascript">
function hide(identifiant,identifiant1) {
        if (document.getElementById(identifiant).className == "hidden") {
            document.getElementById(identifiant).className = "visible";
            document.getElementById(identifiant1).className = "hidden";
        } 
}
function couleur(id,id1){
            document.getElementById(id).style.background = "#40ffff";
            document.getElementById(id1).style.background = "#ffffff"; 
} 
function couleur1(id,id1){
            document.getElementById(id).style.background = "#40ffff";
            document.getElementById(id1).style.background = "#ffffff"; 
}
 
</script>
<div>
<form name="toto">
<table border="1" cellpadding="0" cellspacing="0">
	<tr height=25px>
		<td id="c1" onclick="javascript:hide('div1','div2'),couleur('c1','c2')"; style="cursor:pointer; width:85px" bgcolor='#40ffff'>&nbsp;Langue</td>
		<td id="c2" onclick="javascript:hide('div2','div1'),couleur1('c2','c1')"; style="cursor:pointer; width:85px" bgcolor='ffffff'>&nbsp;Sous-titres</td>		
 
	</tr>
	<tr height="200px">
		<td colspan=2 valign="top">
			<div id="div1" style="font-size:11px" class="visible"> 
				<input type="checkbox" name="fr" value="1" checked>Français<br>
				<input type="checkbox" name="gb" value="2" checked>Anglais<br>
				<input type="checkbox" name="al" value="1">Allemand<br>
				<input type="checkbox" name="sp" value="3" checked>Espagnol<br>
				<input type="checkbox" name="it" value="4">Italien<br>
				<input type="checkbox" name="nl" value="5">Neerlandais<br>
				<input type="checkbox" name="pt" value="4">Portuguais<br>
				<input type="checkbox" name="dn" value="5">Danois<br>
 
			</div>
			<div id="div2" style="font-size:11px" class="hidden">
				<input type="checkbox" name="stfr" value="1" checked>Français<br>
				<input type="checkbox" name="stgb" value="2">Anglais<br>
				<input type="checkbox" name="stal" value="1">Allemand<br>
				<input type="checkbox" name="stsp" value="3">Espagnol<br>
				<input type="checkbox" name="stit" value="4">Italien<br>
				<input type="checkbox" name="stnl" value="5">Neerlandais<br>
			</div>
		</td>
	</tr>
</table>
</form>

La cellule sur laquelle je clique prend une couleur et toutes les autres doivent avoir un bgcolor blanc.

Donc si vous avez une idée, ça m'éviterait 10 fonctions.............
J'ai essayé d'appliquer le même système que la fonction hide mais ça marche pas !!!!!!!!!

Merci d'avance

en remplaçant "table_mere" par l'id réel de la table;

Code:

1
2
3
4
5
6
7
8
9
10
11
var tab=document.getElementById("table_mere").cells;
 
 
for(i=0;i<tab.lenght;i++){
   tab[i].onclick=function(){
      for(j=0;j<tab.lenght;j++){
         tab[j].style.backgroundColor="#ffffff";
      }
   } 
     this.style.backgroundColor="#40ffff";
}

(non testé... les frites sont cuites)

Pardon mais j'ai pas tout compris :(

1)Pourquoi id réelle de la table ? Je dois un id à la table ?
2)Pourquoi tab.length ? c'est l'identifiant de la cellule ?

Merci d'éclairer ma lanterne