温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js控制tr显示和隐藏

发布时间:2020-06-22 12:48:46 来源:网络 阅读:2787 作者:butcher36 栏目:开发技术

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

关于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方法为:
function setDetailMsgRow(rowID,sel) {
    var row = document.getElementById(rowID); 
      if (row != null) { 
        if (sel.value == 0) { 
        	row.style.display = "block";
        } 
        else { 
        	row.style.display = "none"; 
        } 
    } 
}
但是最后在看效果的时候,发现,会有错位现象发生,如下图

js控制tr显示和隐藏

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

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

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

可以把 display 属性改为 table-row

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

js控制tr显示和隐藏


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI