i need to change background-color of a particular colum when the table header corresponding to that column is clicked.How to achieve this using html css & jQuery.

$(document).ready(function(){

    $('#BUTTON_ID').Click(function{

        $('#the_element_ID').css('background-color','#put_your_color_here');
        $(this).parent().css('background-color',$(this).attr('data-value'));

    });


});

that should do it.

can u pls specify what is this #BUTTON_ID,the_element_ID and 'data-value'

The "BUTTON_ID" that is the Id of the tag that will trigger the background change
example <input type= "button" id = "BUTTON_ID" /> the "the_element_ID" will be your Table header ID and the data-value is a default.

$(document).ready(function(){
    $('#BUTTON_ID').Click(function{
        $('#the_element_ID').css('background-color','#put_your_color_here');
    });
});

For you not to worry about the other code. try it like this it will still work.