用JQuery改变整体列布局使表行可见

问题涉及一个表，其中包含一些永久可见的行和一些在加载时生成的行，默认为display: none。实际的项目使用PHP循环生成255行，每一行都有一个唯一的id，并且其中有唯一字段。

$('#numFields').change(function(){
    var numFields = $('#numFields').val()
    for (x = 1; x <= numFields; x++) {
        $('#fieldInfoRow'+x).css('display', 'block');
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border=1>
    <tr>
        <td>Table Name:</td>
        <td><input type='text' /></td>
    </tr>
    <tr>
        <td>Number of Fields:</td>
        <td><input id='numFields' type='number' min='1' max='255' /></td>
    </tr>
    <tr id="fieldInfoRow1" style="display: none;">
        <td>Column 1 heading:</td>
        <td><input type="text" id="field1Name"></td>
        <td>Data type:</td>
        <td><input type="text" id="field1DataType"></td>
    </tr>
    <tr id="fieldInfoRow2" style="display: none;">
        <td>Column 2 heading:</td>
        <td><input type="text" id="field2Name"></td>
        <td>Data type:</td>
        <td><input type="text" id="field2DataType"></td>
    </tr>
    <tr id="fieldInfoRow3" style="display: none;">
        <td>Column 3 heading:</td>
        <td><input type="text" id="field3Name"></td>
        <td>Data type:</td>
        <td><input type="text" id="field3DataType"></td>
    </tr>
    <tr id="fieldInfoRow4" style="display: none;">
        <td>Column 4 heading:</td>
        <td><input type="text" id="field4Name"></td>
        <td>Data type:</td>
        <td><input type="text" id="field4DataType"></td>
    </tr>
</table>

如我的JSFiddle所示，在'Number of Fields'框中输入一个整数定义了要显示的行数。注意:我只包含了4行，因为我不能使用PHP来创建它们。

我遇到的问题是已经存在的右侧<td>元素被推倒，而左侧的(纯文本)跨越使用display: block可见的四个新列。我试过在现有的<td>元素上使用colspan之类的东西，但无济于事。

我相信这是简单明了的风格，但我只是完全没有想法;