为什么表会在以下场景中分散注意力？

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>

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>

截图：

Answer 1

FadeIn和FadeOut 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/

原始代码的行为原因是因为当从显示中删除第三列时，剩余的两列会展开以填充其空间。在固定代码中，永远不会删除第三列（仅删除/显示其内容）。