Adding multiple classes on table td

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/

What's a dynamic table? I only see that the entire table has class "one". — irrelephant, Dec 11 '12 at 02:10
You're going to have many tables or just one? Why is `.one` on the table if you're wanting it on the `td` elements? I'm confused. — Sampson, Dec 11 '12 at 02:18

Sampson · Accepted Answer · 2012-12-11T02:26:23.830

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/

What if I wanted to support IE8, is there an easy way of doing this? Don't want to use a separate lib like selectivizr(if at all possible). — asing, Dec 11 '12 at 02:25
@bigthyme If you wanted full-support, you could determine the classes server-side and ship the HTML out with them already provided. Otherwise, you would need to use a library (whether jQuery, or jQuery + selectivizr) to provide support in browsers that are several years old. — Sampson, Dec 11 '12 at 02:28

Adding multiple classes on table td

1 Answers1

Linked