How Do I Style The First Row Of Every Table On The Page Using Jquery

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: $(functi

Solution 1:

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.

Solution 2:

You may use find() and it will work:

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

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

Solution 3:

$(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");

Solution 4:

Try this:

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

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

Solution 5:

$(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?