javascript - 为什么桌子在以下情况下会分心？

Question

我有一张来自哪张桌子。表中有 3 列。我想fadeIn和fadeOut第三列中的文本框取决于复选框的启用和禁用。当我启用复选框文本框淡入完成但表格列宽发生变化。那么如何克服这个问题。 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 和 FadeOutinput框而不是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/

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