Not using CSS classes on each TD to style; using JQuery

Question

I normally tag the first TD in a form row with a "header" class and the adjacent TD with the "data" class.

Instead of writing all this in the HTML I use the following jQuery:

$("tr").find("td:eq(0)").addClass("header");
$("tr").find("td:eq(1)").addClass("data");

Is this efficient?

Well he says that the header is a cell, that shares a row with data. I'm having trouble imagining what this table actually looks like, though. — Sapph
– Sapph, Commented Jan 3, 2011 at 20:37
Sorry the header is a label/caption (I'm not using CSS to structure my forms because I can't get them to look right). — Caveatrob
– Caveatrob, Commented Jan 4, 2011 at 1:43

user356808 · Accepted Answer · 2011-01-03 20:53:00Z

1

It would be quicker and more efficient to use css. The following css would have the same effect.

td:first-child {background-color:blue;}
td:first-child + td {background-color:yellow;}

Also depends on how large your table is obviously.

answered Jan 3, 2011 at 20:53

user356808

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

1 Comment

user356808 Over a year ago

No, you are not right. There is full support for sibling selectors (td + td) in IE7 and IE8. Full support for first-child pseudo selector in IE8, partial in IE7. Make sure you do not have comments before your td, here are references that may help you. communitymx.com/content/article.cfm?cid=3FAF0 and f6design.com/journal/2008/11/27/…

Bobby D · Accepted Answer · 2011-01-03 20:27:48Z

1

Efficient? Yes
Easy to read and support? Not so much

answered Jan 3, 2011 at 20:27

Bobby D

2,15914 silver badges21 bronze badges

Comments

Dartoxian · Accepted Answer · 2011-01-03 20:29:44Z

0

It is obviously more efficient in terms of space on the large scale. Less efficient for people viewing/executing your document if a lot of javascript has to be run before viewing.

answered Jan 3, 2011 at 20:29

Dartoxian

7801 gold badge6 silver badges10 bronze badges

Comments

Kirk Strobeck · Accepted Answer · 2011-01-03 20:32:01Z

0

Efficient enough.

Some ways to optimize:

$("#someid tr").find... // the ID will narrow the scope of the search
Can you apply the data class as simply the default TR styling and then spec the unique TR as header class?

answered Jan 3, 2011 at 20:32

Kirk Strobeck

18.8k21 gold badges83 silver badges122 bronze badges

Comments

ChrisLively · Accepted Answer · 2011-01-03 20:44:43Z

It depends on how you define efficiency. Is it less code for you to write? Sure.

Will it be faster or slower to execute in the browser than regular CSS? Typically slower. How much so depends on the client browser as well as the structure and size of the table.

A large table will obviously take longer for the javascript to execute on. Large in this case might be hundreds (or thousands) of rows depending on the browser. Longer might mean 500ms or so. Newer browsers have faster javascript runtimes so it might not even be noticeable.

However, if your table is structured correctly (e.g. you are using table-layout:fixed) and have exactly defined widths (e.g. you are not using percentages or anything else that requires a calculation) then the fastest possible method of rendering would be to just set the class attribute in the html.

Collectives™ on Stack Overflow

Not using CSS classes on each TD to style; using JQuery

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related