这个问题涉及到一个表,其中包含一些永久可见的行和一些在加载时生成并默认为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>
如myJSFiddle所示,在“字段数”框中输入整数将定义要显示的行数。注意:我只包含了4行,因为我无法使用PHP创建它们。
我遇到的问题是,已经存在的右侧
<td>
元素被推倒,而左侧的元素(纯文本)跨越了使用display: block
使其可见的四个新列。我曾经尝试过在现有的colspan
元素上使用<td>
之类的东西是没有用的。我相信这是一个简单明了的造型,但我完全没有主意,任何帮助都会非常感谢。
最佳答案
错误是因为表项的默认显示类型不是block
。切换display: block;
以显示:table-row;
以解决此问题。
关于javascript - 通过JQuery可见的表行更改了整个列的布局,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33221781/