comment activer ou désactiver la couleur des cellules individuellement ou en groupe

Question

Nous avons une table simple avec say (matrice nxm) et l'utilisateur sélectionne aléatoirement un ensemble d'entrées en fonction des conditions suivantes.

Notre mise en page est comme ça (juste le code pseudo)

<table> 
    <thead> 
     <tr> 
      c:forEach 1...31 
      <th></th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> // could be 30 | 40 | 50 rows 
      <td>1...31</td> // Just mentioned that there would be as much cells as looped on the c:forEach above 
     </tr> 
    </tbody> 
</table> 

a] Lors de la sélection des cellules nous aimerions retourner la couleur de la cellule (par exemple) entre le bleu, le jaune. La couleur doit basculer sur une sélection de cellule particulière. b] Si l'utilisateur sélectionne le panneau d'en-tête (par exemple, entre 1 et 31), la colonne correspondante (toutes les cellules de cette colonne) doit alterner entre bleu et jaune

Nous pensions utiliser des cases invisibles pour cela , mais nous n'avons pas la logique javascript (nous utilisons jquery) pour la sélectionner et la désélectionner correctement. besoin de pointeurs ici, pour implémenter cette capacité.

Answer 1

Vous pouvez faire quelque chose comme ça, après avoir ajouté des classes CSS appropriées:

Traiter avec des cellules:

$('table#yourtable').find('tbody td').click(function(){ 
    $(this).toggleClass('yellow'); 
    // flip yellow on or off 
    // you can figure out how to deal with other states 
}); 

Traiter colonnes:

$('table#yourtable').find('thead th').click(function(){ 
    var col = $(this).prevAll().length; // had siblings, should be prevall 
    $('table#yourtable').find('tbody tr').each(function(){ 
     $(this) 
      .find('td:eq('+col+')') // nth column 
      .removeClass('yellow blue neutral') // reset colors 
      .addClass('green'); // add a color 
    }); 
}); 

Non testé, et cela peut sans aucun doute être optimisé davantage, mais il devrait vous donner quelques idées.

Answer 2

jQuery est une excellente bibliothèque. Vous pouvez utiliser le sélecteur nth-child() pour récupérer des éléments tels que des colonnes. Quelque chose peut-être comme ceci:

$('table thead th').click(function() { 
    // Quick access to the index of this column. 
    // Add an extra 1 to this because later nth-child is 1-indexed. 
    var idx = $(this).prevAll('th').size() + 1; 

    $('table tbody tr td:nth-child(' + idx + ')').css({ 
    'background-color': 'green' 
    }); 
}) 

Comme approche générale. Je ne sais pas quel genre de traitement logique vous voulez et où vos couleurs s'adaptent, mais cela devrait aider.