爲什麼表格在以下場景中分散注意力？

我有一個從哪個表在那裏。表中有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>

JavaScript代碼如下：

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

截圖： Screenshot of distracted table

來源

2013-10-11 Anand Jaju

你的表單元格是'display：none'，因此它不會被渲染。而是隱藏單元格的內容，而不是單元格本身。 –

淡入和淡出的input箱，而不是td。

試試這個：

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/

之所以原來的代碼是表現這種方式是因爲當第三列從顯示中刪除，然後剩下的兩列擴大以填充其列空間。在固定代碼中，第三列永遠不會被刪除（只有其內容被刪除/顯示）。

來源

2013-10-11 09:23:10

爲什麼表格在以下場景中分散注意力？

回答

相關問題