div या कुछ और में तालिका पंक्तियों को कैसे एम्बेड करें और jQuery fadeIn function को तोड़ना नहीं है?

Question

मुझे एक बहुत ही विशिष्ट समस्या है।

मैं fadeIn, fadeOut फ़ंक्शंस का उपयोग करके एक विशिष्ट कोड डालना चाहता हूं, लेकिन अगर मैं div टैग में एम्बेड किए गए tr और td टैग का उपयोग कर रहा हूं तो यह काम नहीं कर रहा है। html में

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

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

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

} 

और यह:

मैं जे एस भाग के लिए इस कोड है

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

तो fadein, fadeOut अगर वहाँ टीआर हैं divs के अंदर काम नहीं कर रहा, टीडी टैग। अगर मैं उन्हें divs या spans के साथ प्रतिस्थापित करता हूं तो सब कुछ ठीक काम करता है।

क्या टी, टीडी छोड़ने का कोई तरीका है, इसलिए मुझे divs के लिए विशिष्ट स्टाइलशीट बनाने की आवश्यकता नहीं है, इसलिए यह tr, td जैसा दिखेगा।

अग्रिम धन्यवाद।

Answer 1

तो यह प्रतिपादन नहीं कर रहा है कि कैसे आप इसे करने की उम्मीद है तुम क्या है, अमान्य HTML है। आप <div> को <table> के अंदर नहीं डाल सकते हैं और इसमें <tr> तत्व हैं; आप <div> को <td> तत्व के अंदर शामिल कर सकते हैं लेकिन यह वास्तव में आपकी सहायता नहीं करता है।

आप एक तालिका के अलग-अलग वर्गों को परिभाषित करना चाहते हैं, तो <tbody> टैग इस्तेमाल करें:

एचटीएमएल

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

जावास्क्रिप्ट

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

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

आप अपने मूल के साथ this jsFiddle पर एक नज़र डालें तो एचटीएमएल और फायरबग के साथ टेबल का निरीक्षण करें, आप देखेंगे कि <div> तत्व befor हैं ई तालिका और खाली, और उन पंक्तियों को शामिल न करें जिन्हें आप चाहते थे।

Answer 2

टेबल सेल के अंदर रखें div। यहां देखें http://css-tricks.com/using-divs-inside-tables/

Answer 3

आप अपनी तालिका के अंदर <div> टैग का उपयोग क्यों कर रहे हैं? आपको इसके बजाय अपने <tr> टैग ड्राइव करना चाहिए।

कृपया इस बेला here

आपका दिन शुभ हो कोशिश

Answer 4

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