0

I am trying to toggle a table column by providing a button in the header of every column, when user clicks on the button that specific column should be hidden and when user clicks it again it should open. But my problem is as i am hiding the whole column when user clicks on the button in the header user is not able to see the button. Can anyone suggest me how this can be achieved using jquery?

You can see the image as below

enter image description here

Thanks,

Praveen.

praveen
  • 351
  • 3
  • 17
  • possible duplicate of [Hide/Show Column in an HTML Table](http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table) – mplungjan Apr 25 '14 at 05:24
  • 1
    This seems not a jquery related problem, but a logical problem. If you hide the column including the button, obviously you can't click the button anymore. How to solve it? Don't hide the button. –  Apr 25 '14 at 05:27
  • Shrink the column width, rather than hiding it – Kyo Apr 25 '14 at 05:28
  • Give a small set of checkboxes that decide what to show or not – mplungjan Apr 25 '14 at 05:31
  • kyo: Any pointers on show we can shrink the column? – praveen Apr 25 '14 at 05:31

1 Answers1

0

Table column hide or display

The best solution to the problem is place your button in th

jquery

  $(document).ready(function() {
            $('#btnHide').click(function() {
                $('td:nth-child(1)').toggle();
                
            });
        });

Toggle

Check out second case

Solved Checkout

Community
  • 1
  • 1
codefreaK
  • 3,584
  • 5
  • 34
  • 65
  • Can you check the fiddle http://jsfiddle.net/mgMem/672/ I made some changes, what i want is when user clicks on toggle button the second column should not move under toggle button. – praveen Apr 25 '14 at 05:57
  • exactly what you want please specify in a detailed manner i will get it done – codefreaK Apr 25 '14 at 05:59
  • do you want your column to remain under corressponding th when hide is clicked – codefreaK Apr 25 '14 at 06:04
  • As you can see in the updated fiddle when i click on "toggle" button on the first column as we are hiding the first td the second td is occupying the space under first td, but i dont want the second td to be moved under first td. And there should be empty space under "toggle" button. Jsfiddle FYR: http://jsfiddle.net/mgMem/672/ – praveen Apr 25 '14 at 06:06
  • Yeah that was exactly what i asked above let mee c 5 mins – codefreaK Apr 25 '14 at 06:08
  • I have solved the issue by hiding the children using jquery Child selector instead hiding the whole column. Thanks for your inputs though. – praveen Apr 25 '14 at 06:29