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

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

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的格式

---

解决方案：

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