Discussion :

[Steufa]

Bonjour à tous,

Je cherche avec jQuery à afficher une image lorsque certains mots sont affichés dans mon tableau HTML.

Exemple :

<td>voiture</td> (au lieu d'afficher le mot voiture, jQuery doit afficher l'image voiture.png)

<td>velo</td> (au lieu d'afficher le mot velo, jQuery doit afficher l'image velo.png)

<td>camion</td> (au lieu d'afficher le mot camion, jQuery doit afficher l'image camion.png)

Merci d'avance

[danielhagnoul]

Je n'ai pas testé, mais on peut mettre une classe au tag TD, par exemple <td class="showImg">voiture</td>.

$( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.

[Steufa]

Comment faire pour initialiser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.

?

Merci d'avance

[danielhagnoul]

Mais comme d'habitude :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".showImg" ).html( '<img src="' + $( this ).text() + '.png">' );.
 
});

[Steufa]

Merci beaucoup, ça marche parfaitement !

Encore une petite question, comment appliquer "str.toLowerCase" à +$(this).text()+ ?

EDIT : Enfin, non, ça ne marche pas, ça affiche toutes les données HTML du code source au lieu d'afficher l'image.

Merci encore

[danielhagnoul]

$( this ).text().toLowerCase().

Bien entendu $( this ).text() ramène tout le texte existant dans le tag TD. On peut utiliser un attribut data-*.

<td class="showImg" data-img-src="voiture.png"> </td>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$( function(){ // forme abrégée de $(document).ready(function(){
 
    $( ".showImg" ).append( '<img src="' + $( this ).data( "imgSrc" ) + '">' );
 
});