js display隐藏和显示时，样式会被改变。

display显示与隐藏时，原先的样式会被改变，导致不正常显示事先定义好的样式。

1、当表格为多列的情况下，属性为"display:block"行的内容宽度仅与第一列宽度相同，也就是说无论你使colspan的属性值为多少，剩余列的空间都不进行解析。
2、同一行反复的在"display:none;"与"display:block;"两个状态间切换时，表格的底部会持续的产生多余的空白空间以至于造成页面布局的扭曲。

//jsp页面代码

<s:iterator value="dtoInteRuleList" status="num">

<tr bgcolor="#F4F4F4" align="center" height="25"
οnmοuseοut="this.style.backgroundColor='#F4F4F4'"
οnmοuseοver="this.style.backgroundColor='#ddeeff'" style="display:none">
<td><input type="checkbox" name="attachmentList"
value="${id}_rule" />
</td>
<td>${num.index + 1}</td>
<td>${policyName}</td>
<td>1</td>

</tr>

</s:iterator>

//js代码

//多选框选择事件
function checkBox(obj){


//alert(obj.value);
 var attchmentName = document.getElementsByName("attachmentList");
 
 for(var i = 0;i<attchmentName.length;i++){
//alert(attchmentName[i].value);
 if(attchmentName[i].value==obj.value){
if(attchmentName[i].checked){
 
attchmentName[i].checked=false;
attchmentName[i].parentNode.parentNode.style.display = "none";
}else{
attchmentName[i].checked=true;
attchmentName[i].parentNode.parentNode.style.display = "";

                                                //attchmentName[i].parentNode.parentNode.style.display = "block";
} 
 


 }


}
}

当使用这个代码/attchmentName[i].parentNode.parentNode.style.display = "block";时，tr里面的样式都没了，显示不正常。但是换成这个attchmentName[i].parentNode.parentNode.style.display = "";时，样式没有改变。

网上查找，有人建议：样式放置在class里。