Question

I have a dynamic table that needs to assign each TD it’s own class. In the example below, .one is being applied to all TDs for this table. Using just CSS (or Jquery), can I assign td classes .two and .three to the second and third children of this table?

[please do not add class names to TD; this is a dynamic table]

Dynamic – To clarify, the numbers of TDs/TRs in the table are unknown. Therefore, the CSS has to be smart enough to adjust regardless if there are 3 TDs/TRs or 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;
}

See JS Fiddle here: http://jsfiddle.net/bigthyme/kM7H9/

Answer 1

You can use each elements index among the set as a lookup:

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

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

Demo: http://jsfiddle.net/SzKbh/1/

You don’t need to do this though; you can target them without using a class:

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

Demo: http://jsfiddle.net/SzKbh/

Which has pretty good support in modern browsers. This does require you to explicitly set the colors for each row, and thus know how many rows you’ll have. If you don’t know how many rows you’ll have you can use a more complicated selector:

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

Demo: http://jsfiddle.net/SzKbh/2/