Ajout de plusieurs classes sur la table td

J'ai un tableau dynamique qui doit attribuer à chaque TD c'est propre classe. Dans l'exemple ci-dessous, .l'un est appliqué à tous les td pour cette table. En utilisant seulement le CSS (ou Jquery), puis-je attribuer td classes .deux et .trois pour le deuxième et le troisième enfant de cette table?

[merci de ne pas ajouter les noms de classe de TD; c'est un tableau dynamique]

Dynamique - Pour clarifier, le nombre de TDs/Srt dans le tableau sont inconnus. Par conséquent, le CSS doit être assez intelligent pour ajuster indépendamment si il y a 3 TDs/TRs ou 10 TDs/TRs.

HTML:

<table id="foo">
  <tr>
   <td>One</td>
  </tr>
  <tr>
   <td>Two</td>
  </tr>
  <tr>
   <td>Three</td>
  </tr>
</table>​

CSS:

 #foo{
   position: absolute;
   display: block;
   background: gray;
   color: white;
   height: 67px;
   width: 500px;
   border: 1px solid black;
}

tr {
   width: 500px;
   border: 1px solid black;
}

.one td {
   background: red;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

.two td {
   background: green;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

Voir JS Fiddle ici: http://jsfiddle.net/bigthyme/kM7H9/

  • Qu'est ce qu'un tableau dynamique? Je ne vois que l'ensemble du tableau a de la classe "un".
  • Ah oui, désolé d'être vague...voir la nouvelle édition.
  • Vous allez avoir plusieurs tables ou seulement un seul? Pourquoi est - .one sur la table, si vous êtes désireux sur le td éléments? Je suis confus.
InformationsquelleAutor asing | 2012-12-11
  1. 2

    Vous pouvez utiliser chacun des éléments de l'indice entre le définir comme une recherche:

    ​var classes = ['one', 'two', 'three'];

$("#foo td").attr("class", function (index, value) {
    return classes[index]; //0 returns 'one', 1 returns 'two', etc.
});​​​​​​​​​​​​

    Démo: http://jsfiddle.net/SzKbh/1/

    Vous n'avez pas besoin de faire cela; vous pouvez cibler sans l'aide d'une classe:

    tr:nth-of-type(1) td { color: red }
tr:nth-of-type(2) td { color: green }
tr:nth-of-type(3) td { color: blue }​

    Démo: http://jsfiddle.net/SzKbh/

    Qui est assez bon support dans les navigateurs modernes. Cela ne vous oblige à définir explicitement les couleurs pour chaque ligne, et donc de savoir combien de lignes vous aurez. Si vous ne savez pas combien de lignes vous aurez vous pouvez utiliser une plus compliqué sélecteur:

    table tr:nth-child(2n+0) { color: red }
table tr:nth-child(2n+1) { color: blue }
table tr:nth-child(3n+0) { color: green }

    Démo: http://jsfiddle.net/SzKbh/2/

    • Que faire si je voulais le soutenir IE8, est-il un moyen facile de faire cela? Ne voulez pas utiliser une lib comme selectivizr(si possible).
    • Si vous vouliez de support, vous pouvez déterminer les classes côté serveur et envoyer le HTML avec eux déjà fourni. Sinon, vous aurez besoin d'utiliser une bibliothèque (si jQuery, jQuery + selectivizr) pour fournir un soutien dans les navigateurs qui sont vieux de plusieurs années.
    InformationsquelleAutor Sampson