Modification uniquement de la couleur du contenu de la table en utilisant css et javascript

Question

J'affiche des données dans un tableau sur l'une de mes pages Web. Lorsque l'utilisateur clique sur une ligne, je veux que cette ligne change UNIQUEMENT de couleur. Je me contenterais de cette cellule. J'ai un fichier css référencé sur la page avec deux styles, td_on et td_off, qui ont les mêmes paramètres sauf pour les couleurs d'arrière-plan. Je mets le tag « classe » dans le td comme ceci:

<td align="center" class="td_off" > 

J'ai essayé d'utiliser l'action onclick pour changer la classe au style td_on comme si, onclick = « class = td_on » mais cela ne provoquer des changements. Quelqu'un peut-il me dire quelle est la syntaxe appropriée pour faire cela ... ou peut-être un moyen plus facile à réaliser ??? Merci d'avance.

Answer 1

assez facile à faire avec jQuery, voici changer la couleur des cellules de table:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 

     $('td').bind('click',function() { 
      $(this).css('background-color','red'); 
     }); 


    }); 
</script> 

ou changement: $(this).css('background-color','red');-$(this).parent().css('background-color','red');, si vous voulez changer la couleur de la ligne entière.

Answer 2

Essayez ceci:

<td align="center" onclick="switchClass(this);" class="td_off" > 

<script> 
function switchClass(td) 
{ 
    if(td.className == 'td_off') 
    { 
    td.className = 'td_on'; 
    } 
    else 
    { 
    td.className = 'td_off'; 
    } 
} 
</script>