[Résolu] Modifier la propriété onMouseOver d'un TR

Bonsoir

Voila le principe est simple, j'ai un tableau

<table>
<tr><td></td><td></td></tr>
</table>

J'aimerais modifier avec une fonction javascript le TR pour qu'il devienne comme suit

<table>
<tr class="test1" onmouseover="test2" onmouseout="test2" onclick="test3">
<td></td><td></td>
</tr>
</table>

J'aimerais donc moidifier rajouter des propriétés au TR dynamiquement à l'aide d'une fonction javascript.

Merci de votre aide.
Modifié par ashesheart (08 Jun 2007 - 23:05)

Si quelqu'un pense que ce n'est pas possible dite le moi. Merci

Salut. Sisi, c'est possible.

// tr est l'objet JavaScript correspondant à l'élément tr
tr.className = "test1";
tr.onmouseover = function() { test2(); };
tr.onmouseout = function() { test2(); };
tr.onclick = function() { test3(); };

Modifié par Julien Royer (08 Jun 2007 - 21:35)

Merci pour cette réponse rapide. Je vais essayer et je te dirais si sa marche.

Ta solution fonctionne parfaitement. Merci pour ton aide.

J'ai parlé un peu trop vite.

voici mon code source de la fonction javascript.

function table_init(){
	var grid = document.getElementById("directory_table");
	var begin_line = 3;//Where the real data in the table begin.
	var tbody = grid.getElementsByTagName("tbody");
	
	//Build the TRs to make them coloried
	var TRs = tbody[0].getElementsByTagName("tr");	
	for(var j=0;j<TRs.length;j++){
		//Modify the properties of the TR.
		TRs[j].onmouseover = TRs[j].style.backgroundColor = '#000';
	}
	
	//Change the TR element.
		
}

Le problème est que lorsque ma page se charge cela affiche toutes les lignes de mon tableau avec la couleur '#000' alors que je voudrais que cela affiche la couleur #000 seulement au survol de la ligne.

Voici le code html

<table id="directory_table">
<tr><td></td><td></td></tr>
</table>

Modifié par ashesheart (08 Jun 2007 - 22:37)

Je n'adopte peut être pas la bonne méthode. Je sais qu'il y aurait une methode simple qui consisterait a ajouter pour chaque tr dans mon code HTML un truc dans ce genre

<tr onmouseover="javascript:test()"></tr>

Mais moi je souhaiterais ne pas faire ce genre de choses. Je préférerais qu'au chargement de ma page HTML, une fonction javascript "remplisse" tous les tr d'un onmouseover="javascript:test()".

Merci pour ceux qui prennent le temps de chercher
Modifié par ashesheart (08 Jun 2007 - 22:54)

Salut,

ashesheart a écrit :
Le problème est que lorsque ma page se charge cela affiche toutes les lignes de mon tableau avec la couleur '#000' alors que je voudrais que cela affiche la couleur #000 seulement au survol de la ligne.

Si tu veux effectuer une action sur un mouseover, il faut que tu mettes cette action dans une fonction. Sinon le moteur JS considère que tu souhaites affecter à onmouseover le résultat de l'instruction. Et pour connaître le résultat, il lui faut exécuter l'instruction (raison pour laquelle ton tr passe en noir dès le début).

Change donc :

TRs[j].onmouseover = TRs[j].style.backgroundColor = '#000';

par

TRs[j].onmouseover = function() {this.style.backgroundColor = '#000'};

A+
Modifié par marcv (09 Jun 2007 - 09:07)