td colspan funktioniert nicht, während jquery Show/hide() verwendet

Question

Ich habe eine Tabelle von Inhalten

<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> 

Wenn ich auf Mehr dann erste Zeile Beschreibung klicken, wird angezeigt. Es zeigt perfekt, aber Colspan funktioniert nicht.

hier ist mein js Code

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

    } 
$(document).ready(personalChecking); 

Vielen Dank im Voraus

Answer 1

Versuchen Sie dies in Ihrem 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

Das Problem ist, dass Sie die TR Makeln , nicht das TD darin

• 1 ist der A

• 2 die TD ist die 1 in

  ist

• 3 die TR ist, dass 2 in

  ist

• 4 ist die TR unter 3

Aber Ihre Anzeige: keine ist auf dem TD innerhalb t Hut.

Deshalb würde ich empfehlen:

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

, wo die innere $ Sie enthält TR erhalten wird, und dann verwenden Sie das als Kontext für die „td“ Auswahl.

Answer 3

Ich hatte Probleme mit jQuery und Anzeigen und Verbergen/Schiebe-Tabellenzeilen in der Vergangenheit, am Ende musste ich jQuery zu wrap die ausgewählte td in einem div und dann zeigen/verstecken, nicht schön, ich weiß aber an eine knappe Frist hat es geklappt.

Nur etwas zu beachten, wenn Sie ähnliche Probleme mit der Animation haben.

Answer 4

Entschuldigung Es war mein Fehler. Stil Tag sollte Platz in TR sein nicht 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 Auf

Leider Code nicht für mich arbeiten.

@ferocious

Ich habe versucht, es den Stil-Tag in TD platzieren aber seine nicht funktioniert.

@Nooshu

Ich verstehe Ihre Gedanken, aber die Frage ist, wie kann ich ein Div zwischen zwei TR platzieren Ich brauche die div innerhalb eines TD zu setzen ist es nicht oder haben Sie andere Idee

Hinweis: colspan wird in IE6 arbeiten, aber nicht in Firefox 3 und Safari funktioniert, habe ich es in IE7 nicht

getestet

Answer 5

Die p Problem scheint in dem Stil zu sein, der angewendet wird, wenn ein Element angezeigt wird. Es setzt den Stil auf "display: block", der mit colspan zu spielen scheint. Hier sind einige Problemumgehungen, die ich mir ausgedacht habe, aber sie sind nicht perfekt.

Dieser hat ruckelt 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', ''); 
      }    
     }); 
    }); 
} 

Und dieser hat keine annimation überhaupt:

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

fand ich, dass der Firefox ‚Problem‘ ist, weil eine Anzeige haben sollte: Tabellen- Reihe. Der Glitch von IE scheint richtig zu sein, da seine Störungen als Standardverhalten interpretiert werden.

Also die beste Lösung ist mit addClass ("someClass") und removeClass ("someClass") Dinge zu verbergen. (mit einer CSS-Regel: someClass {display: none;})

Das hat den Nachteil, dass es nicht animiert wird. Meine Lösung könnte damit umgehen. Wenn nicht, können Sie in der css ('display', 'table-row') irgendwie skripten.

-Clint

Answer 7

Haben Sie es ohne Animation versucht? d. h. einfach toggle()

Ich bekomme das gleiche Problem, es scheint, dass die animierten Toggles die COLSPAN'ed TDs nicht erscheinen lassen. Ich bekomme alle Zeileninhalte in einer der Spalten ohne COLSPAN angezeigt. Wenn ich es in einen einfachen Toggle() ändere, funktionieren die Dinge.

Answer 8

Der beste Weg, es wird mit der Callback

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

diese Weise FireFox und Chrome zu tun, werden wissen, wie die td exactaly

Answer 9

Das ist das Problem mit machen 'display: block'

entnehmen Sie bitte den folgenden Link http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u

Wenn Sie tr verstecken, verwenden Sie dann 'display: tabel-Reihe' statt von 'display: block', dass tr anzuzeigen,

Wenn Sie td verstecken, verwenden Sie dann 'display: Tabel-cell' anstelle von 'display: block', dass td