JQGRID - Is it possible to change the background color of HTML header text in JavaScript?

Question

Is it possible to change the background color of HTML header text in JavaScript?

Edited: oops - i did forget to add that is it header text in jqGrid.. i'm sorry about that..

Solution 1

thanks for you all!! the answers helps me to find the answer.

var HeaderFontColor = "yellow";
var HeaderBackgroundColor = "brown";
$(".ui-jqgrid-sortable").each(function() {
    this.style.color = HeaderFontColor;
    this.style.backgroundColor = HeaderBackgroundColor;
});

Solution 2

jQuery is not needed, you can do this with regular JavaScript.

document.getElementById("headerID").style.backgroundColor = "#FF0000";

Solution 3

If you want to set background color of all headers of the jqGrid you can include

<style type="text/css">
.ui-jqgrid-sortable {background-color:red}
</style>

in your HTML page. If you want make the changes for one column only you can use setLabel method:

$("#myGrid").jqGrid('setLabel','Price', '', {'background':'red'});

or

$("#myGrid").jqGrid('setLabel','Price', '', 'myColorClass');

In the case you cannot use background-color because jqGrid use jQuery UI per default and every grid element has background defined.To overwrite this you have to use alsobackground` CSS.

I recommend you customize and download the theme which you use in http://jqueryui.com/themeroller/ to have the results looking better.