Td colspan does not work when using jquery show / hide ()

Question

I have a table of contents

<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 More , the 1st line of Description will appear. It shows, 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);

Thank you in advance

Answer 1

The problem manifests itself in the style used to display the element. He sets the "display: block" style, which seems to be messing around with colspan. Here are some workarounds I came up with, but they are not perfect.

This one has jerky ads:

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 generally has no spells:

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 2

This is a problem with 'display: block'

, http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

tr, "display: tabel-row" "display: block", tr,

td, "display: tabel-cell" "display: block", , td

Answer 3

:

$('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 4

, TR, TD

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

• 1 - A

• 2 - TD, 1

• 3 - TR, 2

• 4 - TR 3

: .

:

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

$ TR, td.

Answer 5

, "firefox" , : table-row. IE , .

addClass ( "someClass" ) removeClass ( "someClass" ), . ( CSS: someClass {display: none;})

. . script css ('display', 'table-row') -.

-Clint

Answer 6

? .. ()

, , TDSP COLSPAN'. , COLSPAN. (), .

Answer 7

-

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

FireFox Chrome , td exactaly

Answer 8

, . style TR 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

, .

@ferocious

TD, .

@Nooshu

, , div TR, div TD .

: Colspan IE6, Firefox 3 Safari, IE7

Answer 9

jQuery / , jQuery, td div, / , , , .

, .