How to hide table headers in javascript.

In detail am using easyui-datagrid in which i have to hide the column header.

Please guide me to fix this.

Thanks in advance.

How to hide table headers in javascript.

In detail am using easyui-datagrid in which i have to hide the column header.

Please guide me to fix this.

Thanks in advance.

• javascript
• jquery-ui
• jquery-easyui

• 1 It always helps to include some sample code in order to be able to provide you with a good answer... – excentris Commented Apr 16, 2013 at 8:08

4 Answers 4

If you use pure javascript without the help of any framework, like jQuery etc, you should give an id to your table and assign the table object to a variable:

var tb = document.getElementById("your-table-id");

and then find the "thead" tag inside the table and hide it, as follows:

tb.getElementsByTagName("thead")[0].style.display = "none";

note that getElementsByTagName returns an array of html elements, since a valid table can have 0 or 1 "thead" occurrencies, if you are sure that your table has headers you can securely access the first element and change it's visibility.

If you really need to use JavaScript, then you should be able to use standard selectors and jQuery and use the Hide method:

$("#id or .class of header row").hide();

But I'd remend using CSS instead:

#id or .class of header row {
    display: none;
}

It's lower impact using the CSS route, and all the jQuery will do it apply the same style directly to the element.

I did it with this code:

 $('#my-ddata-grid').datagrid({
 ....
 ....
 });

jQuery('.datagrid-header-inner').hide();

You can also remove other elements, like the pagination-bar like this:

jQuery('.datagrid-pager.pagination').remove();

The following code worked me :

<style>
.datagrid-header-row {
    visibility: collapse;
}
</style>