Aller au contenu

Javascript - Remplacement actif de texte


ggbce

Messages recommandés

Bonjour,

Je cherche une méthode avec Javascript pour remplacer activement la valeur d'un paramètre HTML lorsque l'on clique sur un objet. Pour vous mettre dans le contexte je vais écrire ci-dessous le code initial HTML et comment je voudrais qu'il devienne lorsque l'action Javascript s'est exécuté:

<tr class="afficheblanc" onclick="maFonctionClick('ligne1')">
<td>Ici mon contenu de la ligne 1 avec plusieurs TD en réalité</td>
</tr>

<tr class="afficheblanc" onclick="maFonctionClick('ligne2')">
<td>Ici mon contenu de la ligne 2 avec plusieurs TD en réalité</td>
</tr>

Alors, lorsque quelqu'un clique sur la 2e ligne, la fonction maFonctionClick() doit modifier la valeur HTML de class="afficheblanc" vers class="afficherouge" pour ce <tr> uniquement.

J'ai essayé avec replace mais ça ne marche pas. Je sais qu'il existe une méthode car j'ai déjà vu quelqu'un le faire... mais je n'y parviens pas.

NOTE: Ce script ne réagit pas comme si on faisait un onmouseover() et un onmouseout() pour changer la couleur, c'est plutôt pour conserver la sélection active. Ensuite, lorsque l'on clique sur une autre ligne, ex.: la 8e ligne, la 2e ligne doit reprendre sa class normale et la 8e sera avec la class de sélection !

Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

Pour faire ce que tu veux faire, il te faut avoir recours à DOM. Ton javascript va modifier le DOM, pour appliquer de nouvelles valeurs aux attributs du <tr>.

Tu devras donc faire quelque chose comme ceci:

function maFonctionClick( ligne )
{
ligne.setAttribute( 'class', 'afficheRouge' );
ancienneLigne = document.getElementsByTagName('tr');
for( int i = 0; i < ancienneLigne.length; i ++ )
{
if( ancienneLigne[i].getAttribute( 'class' ) == 'afficheRouge' )
{
ancienneLigne[i].setAttribute( 'class', 'afficheBlanc' );
break;
}
}
}

Avec ligne qui pointe vers l'élément <tr> en question.

Par contre, pour remettre le <tr> dans son état initial (lorsqu'on clique sur un autre <tr>), il te faudra rechercher parmi tous les <tr> celui qui a une classe de valeur "afficheRouge" et la remplacer par "afficheBlanc"

bon, le code que je t'ai donné n'est sûrement pas exempt de bugs, car je n'ai rien testé du tout, j'ai écrit comme ca venait! :up:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...