Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

如我JSFiddle所示，在＆＃39;字段数中输入一个整数＆＃39;框定义要显示的行数。 N.B。我只包含4行，因为我无法使用PHP来创建它们。

我遇到的问题是已经存在的右侧<td>元素被推翻，而左侧的（纯文本）元素跨越了使用{{1}可见的四个新列}。我尝试在现有display: block元素上使用colspan之类的内容无济于事。

我确信它的造型简单易行，但我完全没有想法;任何帮助将不胜感激。

Answer 1

错误是因为表项的默认显示类型不是block。切换display: block;以显示：table-row;以解决此问题。

Answer 2

非常感谢daymannovaes！与table-layout: fixed和2 visibility: hidden <td>元素一起创建了均匀布局。谢谢！

使用JQuery更改整个列布局使表行可见

2 个答案: