Hiding/Showing column of a table with thead and tbody, thead shown in wrong place

I have got a table with many columns (50+).

First of all, my examplecode: http://jsbin.com/irudo/2/

On clicking开发者_JAVA技巧 one of the th's it is said, to hide and add a new span to the page, to be shown again. The hiding works great, and the span is added to the page. But when i click the added span, nothing happens. I added non dynamically spans to the page, to see if my function works, and it does.

So, first question: Why do my added spans not have the click-event attached to them?

On showing the hidden th and td fields, my ths are not shown in the correct place where they were before hiding. They always appear beneath the table.

So, second question: Why do they appear at this position?

The line $(this).add(""+$(this).attr('class')+"").appendTo(document.body) you have, will remove the TH from the table and add it to the HTML body. With all it's click function and stuff. If you common out this line your code will hide and show. If you want the header to still be there.