javascript - 使用 JQuery 更改整体列布局使表格行可见

Question

问题涉及一个表，其中包含一些永久可见的行和一些在加载时生成并默认为 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所示, 在“字段数”框中输入一个整数定义要显示的行数。 注意我只包含 4 行，因为我无法使用 PHP 创建它们。

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

我确信它的样式设计简单明了，但我完全没有想法；任何帮助将不胜感激。

Answer 1

错误是因为表格项的默认显示类型不是 block 。将 display: block; 切换为 display: table-row; 来解决这个问题。