0

I have a html table that gets filled with information from a database. In order to show/hide columns I implemented the one line method in this post Hide/Show Column in an HTML Table

My code implementing the method looks like this:

$("#ID").change(function(){
if ($(this).is(':checked'))
{
    $('th:nth-child(2)').hide("fast");
    $('td:nth-child(2)').hide("fast");
} else {
    $('th:nth-child(2)').show("fast");
    $('td:nth-child(2)').show("fast");
    }

});

That works great other than that when I go to show the column again in my table the cell width and stuff is messed up. I was wondering if there was any way to set it to expand?

Here is an photo of what is happening:

Table cells not expanding picture

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129

1 Answers1

0

Specifically, using the sample you gave above, I'm not sure what's causing your issue.

While the problem could be the hide() method, I've tried a couple different iterations on the same idea, using your script, but I can't get it to reproduce the same behavior.

A couple corrections, however...

  1. ignore the comment above about "display:hidden;" ... there is no such attribute. I think the person may have been trying to refer to "visibility:hidden" but that would make the contents disappear, but the space would not go away... so you'd have an empty column still sitting there with its contents invisible.
  2. If you're setting your handlers up to a bunch of checkboxes, you might consider some optimization of the way you're going about it. I've created a jsfiddle that shows another way you could accomplish something similar. See if it makes any sense to you, and if not, I'll be happy to clarify anything you have questions about.

http://jsfiddle.net/mori57/znKUJ/

If you want to post a little of your markup and CSS in a separate jsFiddle, I'd be happy to look that over and try to give you more specific guidance, as well.

Jason M. Batchelor
  • 2,951
  • 16
  • 25
  • Sorry it's taking me so long to get back about this problem. I moved onto a higher priority item at work this week. I did take a brief look at the jsfiddle, I'll be moving back to this though tomorrow though and there will be more to come then. Thanks so much for your help. ^_^ –  Oct 11 '12 at 18:14
  • No worries! Let me know if you need more explanation of what I put on that jsFiddle. – Jason M. Batchelor Oct 11 '12 at 18:31
  • Oh well, I just think I found something that is the cause of the problem... is getting inserted in the td tags when I re-show the column. Once that is removed the cell expands to its regular height. –  Oct 11 '12 at 18:51
  • Looking at your Jsfiddle solution...I definitely like what you did. Trying to refactor my code to get something similar to work. –  Oct 11 '12 at 19:11
  • I got it to work! It works beautifully and I learned a lot thanks so much! :D :D :D :D –  Oct 11 '12 at 19:58