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:

jQuery: Changer la couleur de la bordure d'UNE cellule de tableau

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:
jQuery: Changer la couleur de la bordure d'UNE cellule de tableau

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

Cela fonctionne bien pour moi:

<style type="text/css">
    table { border: 1px solid #000; border-collapse: collapse; }
    td { border-top: 1px solid #000; border-left: 1px solid #000; }
    td.selected { border: 1px solid #F00; }
</style>

<table>
    <tr>
        <td>blue</td>
        <td>green</td>
    </tr>
    <tr>
        <td>red</td>
        <td class="selected">yellow</td>
    </tr>
</table>

Cela fonctionne très bien! Merci, je n'étais pas au courant de la frontière-l'effondrement de la propriété.

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

<table>
    <tbody>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
        <tr>
            <td>XYZ</td>
            <td>asdf</td>
            <td>2346</td>
        </tr>
    </tbody>
</table>

$('td').each(function(){
    $(this).click(function(){
        $(this).toggleClass('selected');
        $(this).prev('td').css('border-right','#ff0000');
        $(this).parent().prev('tr').find('td:nth-child('+(this.cellIndex+1)+')').css('border-bottom','#ff0000')
    });
});

CSS

table{
      border-collapse: collapse;
}

td { border: 1px solid #ccc; padding:3px }

.selected{
    border-color:#ff0000;
    color:#ff0000;
}
.selected-bottom{
    border-bottom-color:#ff0000;
}
.selected-right{
    border-right-color:#ff0000;
}

Merci pour l'effort, cela ne fonctionne pas mais jnpcl la solution est beaucoup plus propre.
merci, et oui c'est bien 😛 +1 pour lui.

OriginalL'auteur subhaze

0

Il est plus facile de mettre un DIV dans chaque cellule, puis ajouter le traitement de la DIV.

Le problème que j'ai eu avec l'aide de DIVs, c'est que les frontières double. e.g, 2 DIVs uns à côté des autres avec un 1px frontière serait un 2px frontière entre eux.

OriginalL'auteur Diodeus - James MacFarlane
0

Le CSS plan peut être utile ici, car il peut être sur d'autres frontières (qui est le problème ici).

J'ai essayé de jouer avec cette... CSS contours semblent aller à l'extérieur de la frontière, pas sur le dessus-même si je précise pas de frontière pour 'td.sélectionné", il montre encore jusqu'1px l'extérieur, là où la frontière serait.

OriginalL'auteur Fabien Ménager

Vous devez vous connecter pour publier un commentaire.