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
– irrelephant, Commented Dec 11, 2012 at 2: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
– Sampson, Commented Dec 11, 2012 at 2:18

Sampson · Accepted Answer · 2012-12-11 02:26:23Z

2

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/

edited Dec 11, 2012 at 2:26

answered Dec 11, 2012 at 2:11

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

asing Over a year ago

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).

Sampson Over a year ago

@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.

Collectives™ on Stack Overflow

Adding multiple classes on table td

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related