很久没有写代码,最近新接了一个项目,开始记录自己开发过程中遇到的一些问题。

关于js控制tr的显示与隐藏

最开始写法是:

<tr id="att" >

<td >附件文件:</td>

<td>

<div id="div_fujian">

<div class="input-outer"><input type="file" class="tuiTrim input" name="fujian" size="30" maxlength="15" id="fujian" tabindex="1"/></div>

</div>

<input type="button" id="btn_add2" value="增加附件" >

</td>

</tr>

js方法为:functionsetDetailMsgRow(rowID,sel){varrow=document.getElementById(rowID);if(row!=null){if(sel.value==0){row.style.display="block";}else{row.style.display="none";}}}但是最后在看效果的时候,发现,会有错位现象发生,如下图

控制显示的tr出现的时候,发生了错位现象,查找原因,如下:

使用display=block就变成块级元素了,这样的设置会改变页面的格局,这样就会错位;

那么该如何设置,才可以实现js控制tr的显示与隐藏呢,

可以把 display属性改为table-row

对于table-row的说明如下图,大家可以学习一下,我是学到了