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

Question

I have a table of content

<table>
<thead>
  <tr>
 <th>First Name </th>
 <th>Last Name </th>
 <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr class="odd">
 <td>John</td>
 <td>Deo</td>
 <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 1st row</td></tr>
  <tr class="odd">
 <td>Jaden</td>
 <td>Aidan</td>
 <td><a class="personal-checking-more-link">More</a></td>
  </tr>
  <tr><td style="display:none" colspan="3">Description goes for 2nd row</td></tr>
</tbody>

When I click on More then 1st row Description will shown. it shows perfactly but colspan does not work.

here is my js code

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

 }
$(document).ready(personalChecking);

Thanks in advance

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

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.

Answer 3

I had issues with jQuery and showing and hiding / sliding table rows in the past, in the end i had to get jQuery to wrap the selected td in a div and then show / hide that, not nice i know but on a tight deadline it worked.

Just something to keep in mind if you have similar issues with the animation.

Answer 4

Sorry It was my mistake. style tag should be place into TR not in TD

  <tr style="display:none"><td colspan="3">Description goes for 1st row</td></tr>
  <tr style="display:none"><td colspan="3">Description goes for 2nd row</td></tr>

@Thomas Stock

Sorry your code does not work for me.

@ferocious

I have tried it place the style tag into TD but its not working.

@Nooshu

I understand your thought but the question is how could I place a div between two TR I need to put the div inside a TD isn't it or do you have other idea

Note: Colspan is working in IE6 but not working in Firefox 3 and Safari, I have not tested it into IE7

Answer 5

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 6

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 7

I'm having this exact problem! I'm using the show/hide in a table to toggle a form but in Firefox (and Safari) it's not working right --> www.bni-am.co.uk

If I come up with a fix, i'll let you know. Could you do the same if you get anywhere?

thanks, Greg.

Answer 8

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.