How do I style the first row of every table on the page using jQuery

Question

I need to manually style the first row of every table on a page. Unfortunately I'm dealing with some old browsers so would like to do this via jQuery.

Currently I'm using:

$(function() {
 $(".OpenCourse tr:first").addClass("OpenCoursesHeader");
});

then adding .OpenCoursesHeader td {} to style.

the class OpenCoursesHeader only seems to be applied to the first table.

Any ideas how I get it to apply to the second? There will always only be two tables on the page if that makes it simpler.

Apply a common CSS class to your tables... My guess is that the second table does not have the class `.OpenCourse`. — Leniel Maccaferri, Oct 17 '12 at 16:06

VVV · Answer 1 · 2012-10-17T17:07:26.510

3

You could use the first-child selector. first will only select the first element of the selector you're working with.

$(function() {
 $(".OpenCourse tr:first-child").addClass("OpenCoursesHeader");
});

But if you have nested tables, this solution will also add the class to the first tr.

edited Oct 17 '12 at 17:07

answered Oct 17 '12 at 16:09

VVV

7,563
3
34
55

Still suffers from the same issue as mine when multiple `thead`/`tbody`s are concerned - [fiddle](http://jsfiddle.net/ult_combo/bUqPX/3/), in which case I'd prefer Vision's solution. – Fabrício Matté Oct 17 '12 at 16:16
@FabrícioMatté True. I've pointed out the problem with nested tables but didn't think about thead/tbody. Good point! – VVV Oct 17 '12 at 16:19
If I remember correctly, `:first` isn't necessarily the first on the page, just the first in whatever set is currently being worked with (in this case all `tr` children of `.OpenCourse` elements) – nkorth Oct 17 '12 at 16:57

score 1 · Answer 2 · edited May 23 '17 at 11:43

1

You may use find() and it will work:

$(".OpenCourse").find("tr:first").addClass("OpenCoursesHeader");

DEMO: http://jsfiddle.net/bUqPX/1/ -- thanks to Fabrício :)

edited May 23 '17 at 11:43

Community

1
1

answered Oct 17 '12 at 16:06

VisioN

143,310
32
282
281

Looks good, +1 because this is more bulletproof than mine in case thead/tbody elements are used. `=]` – Fabrício Matté Oct 17 '12 at 16:12

Fabrício Matté · Answer 3 · 2012-10-17T17:12:37.350

1

$(function() {
    $(".OpenCourse tr:nth-child(1)").addClass("OpenCoursesHeader");
});

Fiddle

:nth-child() selector Reference

Or you can use the :first-child selector as answered by @ComputerArts, which is equivalent to :nth-child(1) as per documentation.

Also, this may not work properly if you have <thead>/<tbody>/<tfooter> elements, in that case you must specify the one you want to apply the styling to in the selector as well:

$(".OpenCourse thead:nth-child(1) tr:nth-child(1)").addClass("OpenCoursesHeader");

edited Oct 17 '12 at 17:12

answered Oct 17 '12 at 16:06

Fabrício Matté

69,329
26
129
166

doesnt seemed to have worked at all, the first tables lost styling now. – Neil Skoglund Oct 17 '12 at 16:07
Well if none of your answers work, update the fiddle to reproduce your problem, I'll be afk now but will look it up later as soon as I can. – Fabrício Matté Oct 17 '12 at 16:10

score 0 · Answer 4 · answered Oct 17 '12 at 16:06

0

Try this:

$(function() {  
     $("table tr:first").addClass("OpenCoursesHeader"); 
});

This will apply to all tables on the page. Hope this Helps!!

answered Oct 17 '12 at 16:06

Praveen

1,449
16
25

i have to limit it to .OpenCourses as theirs other table stylings – Neil Skoglund Oct 17 '12 at 16:10

score 0 · Answer 5 · answered Oct 17 '12 at 16:08

0

$(function() {
    $(".OpenCourse").each(function() {
        $("tr:first",this).addClass("OpenCoursesHeader");
    });
});

Give that a try, is there a page with the code on that we can look at?

answered Oct 17 '12 at 16:08

Selven

276
4
12

score 0 · Answer 6 · edited May 23 '17 at 12:13

0

Select table first and do a find on tr:first.

Below is assuming that OpenCourse is a container for collection of tables..

$(".OpenCourse table").find("tr:first").addClass("OpenCoursesHeader");

If OpenCourse is the class of the table then try @Vision's answer

edited May 23 '17 at 12:13

Community

1
1

answered Oct 17 '12 at 16:08

Selvakumar Arumugam

79,297
15
120
134

How do I style the first row of every table on the page using jQuery

6 Answers6

Linked