Changer le background d'une celluleavec onclick

Bonjour,

voici mon probleme : dans un tableau,je souhaite pouvoir changer la couleur du background des cellules lorsque je clique dessus.

Je réalise tout en Javascript, et je génère donc le tableau dynamiquement. Je précise aussi que le js est placé dans un fichier externe, donc je ne peux pas faire la solution que l'on voit partout sur Internet (avec le onClick=javascript:...).

Dans le code ci-dessous, je n'ai pas encore mis en place les fonctions qui permettront de justifier la necessité de générer le tableau en js, mais l'utilisateur pourra choisir la taille de son tableau (that's why) :

Le Js :

var taille;
var cellId=0;

function init(){
	initGrille();
	window.addEventListener('click',celluleNoire,false);
}

function initGrille(){
	var i,j;
	var table = document.createElement("table");
	taille = 10;
	//double boucle, imbriquée, crée le tableau
	for(i=0;i<taille;i++){
		var ligne = document.createElement("tr");
		for(j=0;j<taille;j++){
			var cellule = document.createElement("td");
			ligne.appendChild(cellule);
			
			cellId= cellId+1;//va permettre d'attribuer un id à chaque case;
			cellule.id = 'cell'+cellId;
			
		}
		table.appendChild(ligne);
	}
	document.body.appendChild(table);
}

function celluleNoire(event){ 
        var cellule = document.getElementByTagName('td');
	cellule.setAttribute("class", "noir");
	 
}

window.addEventListener('load',init,true);

et le css :

body {
	margin : 0;
}

table {
	border-collapse : collapse;
	margin:30px auto;
}

td {
	width : 30px;
	height : 30px;
	border:1px solid black;
}
.noir{
	background-color : #000;
}

et donc, le fichier index.html est vide.

Quelqu'un a une idée? Merci d'avance pour vos réponses.

Bonsoir, je me permets de faire un petit up!
Modifié par lielos (03 May 2011 - 23:00)

Salut,

Ta fonction doit récupérer et utiliser l'élément qui a déclenché l'événement.

function celluleNoire(event){ 
        var cellule = event.target;
	cellule.setAttribute("class", "noir");
}

Perso, je mettrais l'écouteur sur l'élément table lors de sa création...

table.addEventListener('click',celluleNoire,false);

tm

bonsoir Tm et merci pour ta réponse.

J'aurais peut-être du revenir le dire, mais j'ai résolu mon probleme. C'est effectivement la solution que j'ai trouvé. Voici le code du fichier en entier, pour ceux qui repasserai sur ce forum avec un souci similaire :

var taille;
var cellId=0;

function init(){
	choixTaille();
	this.addEventListener('contextmenu',celluleNoire,true);
}

function choixTaille(){ // fonction créant une liste déroulante
	var i;
	var taille=0;// constitura le numéro à choisir pour construire sa grille
	var formTaille = document.createElement("form");//création du formulaire
		formTaille.setAttribute("name", "select_form");
		formTaille.setAttribute("id", "choix_taille");
	var createSelect = document.createElement('select');//création du select
		createSelect.setAttribute("name", "select");
	var opt = document.createElement('option');
		opt.setAttribute("value", "1");//value par defaut
		
	for(i=0;i<20;i++){//la taille de grille maxi est 30 cases de coté
		taille = taille+1; //pour incrémenter la valeur de la liste déroulante de 1
		opt = document.createElement('option');//chaque tour de boucle crée une balise option
			opt.setAttribute("value", taille);
		createSelect.appendChild(opt);
		var txtNode = document.createTextNode(taille);//création d'un noeud texte
		opt.appendChild(txtNode); //et ajout à la balise option en cours de création
	}
	formTaille.appendChild(createSelect); //ajout du select au formulaire
	
	
	var attachTo = document.getElementById('text_select_taille');
	attachTo.appendChild(formTaille);//ajout du formulaire au paragraphe 'text_select_taille'
	
	createSelect.onchange = function() {initGrille(this.value);};
}


function initGrille(taille){
	var i,j;
	var table = document.createElement("table");
		table.setAttribute("id", "grille");
		
	taille = Number(taille)+1;//la taille sera incrémentée de 1 pour prevoir zones de selection
	//double boucle, imbriquée, crée le tableau
		//i < taille+1, car on reserve une ligne et une colonne pour selection ligne et colonne
	for(i=0;i<taille;i++){
		var ligne = document.createElement("tr");
		for(j=0;j<taille;j++){
			var cellule = document.createElement("td");
				cellule.setAttribute("class","blanc");
			ligne.appendChild(cellule);
			
			//conditions permettant de selectionner la 1ere ligne et la 1ere colonne
			if((i<taille) && (j<1)){cellule.setAttribute("class","fleche_droite");}
			if((i<1) && (j<taille)){cellule.setAttribute("class","fleche_bas");}
			
			//va permettre d'attribuer un id à chaque case;
			cellId= cellId+1;
			cellule.id = 'cell'+cellId;			
		}
		table.appendChild(ligne);
	}
	document.body.appendChild(table);
}

function celluleNoire(event){ 
	// on applique la classe 'noir' à la cellule ciblé
	if(event.target.className == 'blanc'){
		event.target.setAttribute("class","noir");
		rien(event);//empeche l'ouverture de la fenetre contextuelle
	}
	// on applique la classe 'blanc' à la cellule ciblé
	else if(event.target.className == 'noir'){
		event.target.setAttribute("class","blanc");
		rien(event);
	}
}

function rien(event) {
	event.preventDefault(); //annule l'évènement event
}

window.addEventListener('load',init,true);