I have a table as follows. I need to give background color(yellow) only to the first header column. Also all the text color should be blue in the header (for both columns). What are the ways to achive it using jQuery?

Note: I am trying to learn jQuery. Hence the solution should be using jQuery.

   <table id = "myTable">
        <thead>
            <tr>
                <th>
                     <a href="">Name</a>
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>

I have a table as follows. I need to give background color(yellow) only to the first header column. Also all the text color should be blue in the header (for both columns). What are the ways to achive it using jQuery?

Note: I am trying to learn jQuery. Hence the solution should be using jQuery.

   <table id = "myTable">
        <thead>
            <tr>
                <th>
                     <a href="http://www.Lijo.">Name</a>
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>

• javascript
• jquery

Share Improve this question Follow edited May 17, 2012 at 9:59 LCJ asked May 17, 2012 at 9:44 LCJLCJ 22.7k6969 gold badges268268 silver badges430430 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

$("#myTable th:first").css({
    "background-color": "yellow"
});
$("#myTable th").css({
    "color": "blue"
});​

You can also achieve the same in one line:

$("#myTable th")
    .css({"color": "blue"})
    .filter(":first")
    .css({"background-color": "yellow"});​

You can select the first header column like so:

var firstColumnHeader = $('#myTable thead th:first-child');

and then you can update the background colour by using the css method, like so:

firstColumnHeader.css('background', '#FCD116');

Here is a jsfiddle demostration.

Hiya demo http://jsfiddle/r3jMv/1/ (updated) (old =>) http://jsfiddle/Zarhu/2/

and with blue color here: http://jsfiddle/r3jMv/6/ another updated version from below ment: http://jsfiddle/cC6hk/

following should do the trick.

this might be good play ground: http://vkanakaraj.wordpress./2009/06/18/select-a-column-of-a-table-using-jquery/

jquery code

$(function(){
  // Change first column background color.

  $("table thead tr th:first-child").css("background-color","#ff0000");
});

​

$("#myTable > thead > tr >th").css("background-color","yellow");​

html

<table id = "myTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>
​

This is for the first header where class name should do all the styling. The selector gets the all the "th" inside the #mytable and using the eq(0) bring the first th and add to it the class

$("#myTable th").eq(0).addClass("ClassName")

This for all the header where class name 2 should do the styling you

$("#myTable th").addClass("ClassName2")