Table用js设置 display:none之后再设置为block后格式乱了怎么解决？

最新推荐文章于 2023-03-01 14:58:26 发布

被解救的小明

最新推荐文章于 2023-03-01 14:58:26 发布

阅读量1.2k

点赞数 4

分类专栏：前端遇到的坑文章标签： html css html5 javascript

本文链接：https://blog.csdn.net/LittleMH/article/details/119947053

版权

前端遇到的坑专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在前端开发中遇到一个问题，当使用JS设置Table的display属性为none隐藏后，再次显示（设置为block）时，Table的格式出现混乱。原因在于display:none会清除表格的布局信息。解决方案包括：将display属性设置为空字符串，或者针对不同元素类型恢复其默认值，如table、td等。此外，还可以尝试使用CSS类切换来避免格式问题。

摘要由CSDN通过智能技术生成

Table用js设置 display:none之后再设置为block后格式乱了怎么解决？

问题描述：

一直没写过前端，遇到的坑记录一下。
需求是控制div的消失之后再显示，设置document.getElementsById(“testId”).style.display=“none”,再显示则设置为block，但是block之后，格式乱掉了，这个问题搞了好几天，分享一下。

document.getElementsById("testId").style.display="none";
document.getElementsById("testId").style.display="block";

原因分析：

设置为none之后将会清除之前table的格式

解决方案：

方法一： 可以选择用一个新的div去重新包裹，但是这次对我有限制，试过之后遂放弃
方法二： display:block只是块元素的默认值。内联元素的默认值是display:inline，表格table元素的默认值是display:table，表格单元格td元素的默认值是display:table-cell，表格行tr元素的默认值是display:table-cow，然后对应不同的元素去修改就OK；
方法三：也是我自己解决的方法，设置为display=""就ok了，如例：document.getElementsById("testId").style.display=""
方法四： 设置 td class="test" type="hidden"，JQ：$('.test').hide(); $('.test').show();