HTML Table Header Styling using jQUery

Question

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.com">Name</a>
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>

Salman Arshad · Accepted Answer · 2012-05-17 09:53:39Z

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"});

answered May 17, 2012 at 9:53

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

1 Comment

Salman Arshad Over a year ago

$("#myTable th a").css({"color": "red"}).

Richard · Accepted Answer · 2012-05-17 09:47:20Z

1

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.

answered May 17, 2012 at 9:47

Richard

8,2903 gold badges39 silver badges60 bronze badges

Comments

Tats_innit · Accepted Answer · 2012-05-17 10:08:36Z

1

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

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

following should do the trick.

this might be good play ground: http://vkanakaraj.wordpress.com/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>

edited May 17, 2012 at 10:08

answered May 17, 2012 at 9:46

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

4 Comments

LCJ Over a year ago

Yellow should be only to the first column. How do we do it?

LCJ Over a year ago

Thanks...What do I do if I have a hyperlink to be colored as Red? jsfiddle.net/Lijo/7mCqU/1

Tats_innit Over a year ago

cool cool, you want first column to be permanent colored or only when hover a mouse colored?

Tats_innit Over a year ago

Cool like this: jsfiddle.net/cC6hk ? don't forget to accept the answer :))

Andrey · Accepted Answer · 2017-03-15 11:44:37Z

1

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

edited Mar 15, 2017 at 11:44

Andrey

4,05023 silver badges35 bronze badges

answered May 17, 2012 at 9:48

Samir Adel

2,5092 gold badges15 silver badges16 bronze badges

Collectives™ on Stack Overflow

HTML Table Header Styling using jQUery

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related