div 또는 다른 테이블 행에 테이블 행을 삽입하는 방법 및 jQuery fadeIn 함수를 중단하지 않습니까?

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"); 

} 

그리고이 :

나는이 JS 부분에 대한 코드가 그럴 필요가있는 경우

<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이 페이드 아웃이 된 div의 내부 TD 태그를 작동하지 않습니다. div 또는 span으로 대체하면 모든 것이 잘 작동합니다.

tr, td를 남겨 두는 방법이 있나요? 그래서 div에 특정 스타일 시트를 만들 필요가 없으므로 tr, td처럼 보일 것입니다.

미리 감사드립니다.

Answer 1

는 당신이에 기대하는 방법을 렌더링하지 그래서 당신은 무엇을 가지고하는 것은, 잘못된 HTML입니다. <table> 안에 <div>을 넣고 <tr> 개의 요소를 포함 할 수는 없습니다. <td> 요소 안에 <div>을 포함 할 수는 있지만 실제로 도움이되지는 않습니다.

당신이 테이블의 별도의 섹션을 정의하려면

는 <tbody> 태그 사용

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> 

자바 스크립트

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

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

당신은 당신의 원본과 this jsFiddle을 살펴 경우 HTML을 사용하고 Firebug를 사용하여 테이블을 검사하면 <div> 요소가 befor e 테이블을 비우고 원하는 행을 포함시키지 마십시오.

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'); 
});