다음 시나리오에서 테이블이 산만 해지는 이유는 무엇입니까?

Question

나는 거기에있는 테이블을 가지고있다. 테이블에는 3 개의 열이 있습니다. 체크 박스의 활성화 및 비활성화에 따라 fadeIn 및 fadeOut의 세 번째 열에있는 텍스트 상자가 필요합니다. 확인란을 선택하면 텍스트 상자 fadeIn이 완료되지만 테이블 열 너비가 변경됩니다. 이 문제를 극복하는 방법. 다음과 같이 http://jsfiddle.net/7gbNK/60/

코드는 다음과 같이

<form action="" method="POST"> 
    <table width="50%" cellpadding="4" cellspacing="1" border="1"> 
     <tr> 
      <td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname','td_surname')"></td> 
      <td width="10%" align="center">Surname</td> 
      <td width="35%" class="td_surname" style="display:none;" align="center"><input type="text" name="surname" id="surname" /></td> 
     </tr> 
    </table> 
</form> 

자바 스크립트 코드는 다음과 같습니다

<script type="text/javascript"> 
    function enable(id,name,className) 
    { 
     $(document).on('change','#'+id, function() 
     { 
      var checked = $(this).is(":checked"); 

      var index = $(this).parent().index(); 

      if(checked) { 
       $('.'+className).fadeIn(100); 
      } 
      else { 
       $('.'+className).fadeOut(100); 
      } 
     }); 
    } 
</script> 

스크린 샷 : 대신 td의

Answer 1

FadeIn과 페이드 아웃 input 상자.

이 시도 :

HTML :

<form action="" method="POST"> 
    <table width="50%" cellpadding="4" cellspacing="1" border="1"> 
     <tr> 
      <td width="10%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname','td_surname')"></td> 
      <td width="20%" align="center">Surname</td> 
      <td width="70%" class="td_surname" align="center"><input style="display:none;" type="text" name="surname" id="surname" /></td> 
     </tr> 
    </table> 
</form> 

JS :

이

function enable(id,name,className) 
{ 
     //Commented lines below are not required. These are present in your code 
     //$(document).on('change','#'+id, function() 
     //{ 
      var el = '#'+id; 
      var checked = $(el).is(":checked"); 

      var index = $(el).parent().index(); 

      if(checked) { 
       $('#'+name).fadeIn(100); 
      } 
      else { 
       $('#'+name).fadeOut(100); 
      } 
     //}); 
    } 

데모 : 원래의 코드가 그런 식으로 행동하는 이유 http://jsfiddle.net/W2wQF/

이유가있을 때 세 번째 때문에 열이 디스플레이에서 제거 된 후 나머지 두 열이 확장되어 해당 열을 채 웁니다. 공간. 고정 코드에서 세 번째 열은 절대로 제거되지 않습니다 (내용 만 제거/표시됨).