Tablo satırlarını div veya başka bir şeye yerleştirme ve jQuery fadeIn işlevini kırma nasıl engellenir?

Question

Çok özel bir sorunum var.

FadeIn, fadeOut işlevlerini kullanarak belirli bir kod eklemek istiyorum, ancak div etiketine katıştırılmış tr ve td etiketlerini kullanıyorum çalışmaz. html

var registrationPart = $('div.registration-part'); 
var loginPart = $('div.login-part'); 

$('span.logreg.log').click (function() { 

       registrationPart.fadeOut("fast"); 
       loginPart.fadeIn("slow"); 

} 

Ve bu:

Bu JS bölümü için kod var tr varsa

<table class="table"> 
    <div class="registration-part"> 
     <tr> 
        <td>registration</td> 
      </tr> 
    </div> 
    <div class="login-part"> 
     <tr> 
        <td>login</td> 
      </tr> 
    </div> 
</table> 

Yani fadeIn, fadeOut div içinde, td etiketleri çalışmıyor. Onları div veya açıklıkla değiştirirsem her şey yolunda gider.

tr, td'den nasıl ayrılacağınız bir yol var, bu yüzden div'ler için belirli bir stil sayfası yapmam gerekmiyor, bu yüzden tr, td gibi görünecek.

Şimdiden teşekkürler.

Answer 1

bunu, ona bekliyoruz nasıl render değil bu yüzden ne var, geçersiz HTML olduğunu. Bir'u <table> içine koyamazsınız ve <tr> öğelerini içerir; Bir'u <td> öğesinin içine dahil edebilirsiniz, ancak bu gerçekten size yardımcı olmaz.

bir tablonun ayrı bölümler tanımlamak istiyorsanız

, <tbody> etiketini kullanın:

HTML

<table class="table"> 
    <tbody class="registration-part"> 
     <tr> 
      <td>registration</td> 
     </tr> 
    </tbody> 
    <tbody class="login-part"> 
     <tr> 
      <td>login</td> 
     </tr> 
    </tbody> 
</table> 

JavaScript

var registrationPart = $('tbody.registration-part'); 
var loginPart = $('tbody.login-part'); 

$('span.logreg.log').click (function() { 
    registrationPart.fadeOut("fast"); 
    loginPart.fadeIn("slow"); 
} 

Eğer orjinali ile this jsFiddle bir göz atacak olursak HTML'yi ve Firebug'la tabloyu denetleyin, öğelerinin befor olduğunu fark edeceksiniz. e tabloyu ve boş ve istediğiniz satırları dahil etmeyin.

Answer 2

Tablo hücresinin içine div yerleştirin. Buraya bakın http://css-tricks.com/using-divs-inside-tables/

Answer 3

Neden masanızın içinde <div> etiketleri kullanıyorsunuz? Bunun yerine <tr> etiketlerini kullanmalısınız.

,

here iyi günler bu Turp deneyin

Answer 4

$('#selector').click(function() { 
    $('.registration-part').parent().find('td:first').fadeOut('fast'); 
    $('.login-part').parent().find('td:last').fadeIn('slow'); 
});