td colspan does not work while using jquery show/hide()

Answer 1

Try this in your code:

$('a.personal-checking-more-link').click(function() {
    var descriptionTR = $(this).parent().parent().next();
    $(descriptionTR).toggle('slow').colSpan = 3;
});

http://www.nabble.com/IE7:-Setting-ColSpan-as-Attribute-td21252688s27240.html

Answer 2

I found that the firefox 'problem' is because a should have display:table-row. IE's glitch seems right since its glitches become interpreted as standard behavior.

So the best solution is use addClass("someClass") and removeClass("someClass") to make things hidden. (with a CSS rule: someClass {display:none;})

This has the drawback of not being animated. My solution could handle that. If not you can script in the css('display','table-row') somehow.

-Clint

Answer 3

The problem appears to be in the style applied when showing an element. It's setting the style to "display:block" which appears to be messing with colspan. Here are some workarounds that I came up with, but they're not perfect.

This one has jerky annimation:

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().toggle('slow', function() {
            if($(this).css('display') == 'block')
            {
                $(this).css('display', '');
            }               
        });
    });
}

And this one has no annimation at all:

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        var nextRow = $(this).parent().parent().next();
        if(nextRow.css('display') == 'none')
        {
            nextRow.css('display','');
        }
        else
        {
            nextRow.css('display', 'none');
        }
    });
}

Answer 4

The best way to do it is using the callback

personalChecking = function () {
    $('a.personal-checking-more-link').click(function() {
        $(this).parent().parent().next().show('slow', function() {           
            $(this).attr("colspan", "3");
        });
    });
}

this way FireFox and Chrome will know how to render the td exactaly

Answer 5

Have you tried it without animation? i.e. just toggle()

I am getting the same problem, it seems the animated toggles aren't making the COLSPAN'ed TDs appear. I get all my row contents appearing in one of the non COLSPAN'ed columns. When I change it to a plain toggle() things work.

Answer 6

The problem is that you are toggling the TR, not the TD within it

$(this).parent().parent().next()
   1      2         3       4

• 1 is the A

• 2 is the TD the 1 is in

• 3 is the TR that 2 is in

• 4 is the TR below 3

But your display:none is on the TD within that.

So I would recommend:

$("td",$(this).parent().parent().next()).toggle('slow');

where the inner $ will get you the containing TR, and then you use that as context for the "td" selection.