jQuery: Changer la couleur de la bordure d'UNE cellule de tableau
J'ai un HTML simple tableau d'options ici:
<table>
<tr>
<td>blue</td>
<td>green</td>
</tr>
<tr>
<td>red</td>
<td>cream</td>
</tr>
</table>
Le CSS avec les styles:
td { background-color: #FFF; border: 1px solid #3F3F3F; cursor: pointer; }
td.selected { color: #D93A2C; border: 1px solid #D93A2C; }
Ressemble à ceci:
Quand je clique sur une des cellules du tableau, je veux la bordure et le texte en rouge. Donc j'utilise jQuery pour faire basculer l' '.sélection de " classe à l'aide du code suivant.
$('td').each(function(){
$(this).click(function(){
$(this).toggleClass('selected');
});
});
Cependant, le résultat est ceci:
La première cellule du tableau (en bleu) est le seul qui regarde comme je veux quand sélectionnés. J'ai besoin de toutes les frontières de la cellule sélectionnée est mise en surbrillance.
Des idées sur la façon de réaliser cet objectif? Je ne suis pas opposé à l'amerrissage forcé les tables si quelqu'un peut proposer une meilleure façon.
OriginalL'auteur nrj | 2011-02-08
Vous devez vous connecter pour publier un commentaire.
Cela fonctionne bien pour moi:
OriginalL'auteur drudge
Ici est un très hack new'ish façon de faire le travail, pourrait vous donner une idée sur votre fin pour produire quelque chose de mieux... je n'ai pas entièrement testé sur tous les navigateurs, mais il a travaillé sur IE8,chrome,FF. Live exemple
HTML
JS
CSS
merci, et oui c'est bien 😛 +1 pour lui.
OriginalL'auteur subhaze
Il est plus facile de mettre un DIV dans chaque cellule, puis ajouter le traitement de la DIV.
OriginalL'auteur Diodeus - James MacFarlane
Le CSS
plan
peut être utile ici, car il peut être sur d'autres frontières (qui est le problème ici).OriginalL'auteur Fabien Ménager