Introduction:
In this article,i am going to explain about how to hiding a selected table
column/row using jquery.

Main:

See this below jquery code,it will hide the selected column in a table,

$(document).ready(function() { $('th').hover( function(){ var colindex=$(this).parent().children().index(this); $(this).addClass('hover'); $('table td:nth-child('+(colindex+1)+')').addClass('hover'); }, function(){ $('table tr').children().removeClass('hover'); } );   $('th').click(function(){ $(this).hide(); colindex=$(this).parent().children().index(this); $('table td:nth-child('+(colindex+1)+')').hide(); }); });

In the jQuery code, we start by attaching the hover event to all the column headings of the table. In the event handler we find out the index location of the column heading that is being hovered over, and store it in the variable colindex. The index() method use zero-based counting; that is, it begins from zero.

We then apply the style properties defined in the style rule .hover to the highlighted column heading and to the column whose index location is stored in the colindex variable (the one that is hovered over) to highlight them. Since the :nth-child() method is one-based, we increment the value of colindex by one before highlighting it.

When the mouse pointer is moved away from the column headings, we remove the properties defined in the style rule .hover from all the rows of the table. In the click event handler we hide the column heading that has been clicked and find out its index, which we store in the colindex variable.

Finally, we hide the column contents whose value is stored in the colindex variable (the index location of the column heading that is clicked). Hence, the column heading and the complete column contents will be made invisible when any of the column headings are clicked. On hovering over a column heading, it will be highlighted, along with the contents of the column,

Conclusion:
Hope this helps,
Happy coding.