JavaScript 显示隐藏函数布局问题火狐浏览器

JavaScript show hide function layout issue firefox chrome

本文关键字：问题 火狐浏览器 布局 函数 显示 隐藏 JavaScript      更新时间：2023-09-26

我有一个 asp.net 网格视图，我在所选复选框上使用"onclick"隐藏和显示列。单击时，隐藏列在IE中显示正常，但是它们在Chrome，Firefox中重叠。我一定错过了什么，就好像它们被添加到同一列中一样。因为我是新手，我可以发布屏幕截图。

任何帮助非常感谢。 

function showColumn(r,grid) {
rows = document.getElementById("GridView1").rows;
drop = document.getElementById(grid);
if (drop.checked == true) {
    for (i = 0; i < rows.length; i++) {
        rows[i].cells[r].style.display = "block";
        }
    }
else if (drop.checked == false) {
    for (i = 0; i < rows.length; i++) {
        rows[i].cells[r].style.display = "none";
        }
    }
}
<p>
    <asp:CheckBox ID="CheckBox1" runat="server" onclick="showColumn(2,'CheckBox1')" 
        Text="Show Option Name" />
</p>
<p>
    <asp:CheckBox ID="CheckBox2" runat="server" onclick="showColumn(1,'CheckBox2')" 
        Text="Show ID" />
</p>

而不是使用：

rows[i].cells[r].style.display = "block";

。若要显示表单元格，请尝试将 Display 属性设置为空字符串，以便它返回到默认值：

rows[i].cells[r].style.display = "";

尝试使用 visibility:hidden（和 visibility:visible ）而不是 display css 属性。与display:none元素不同，即使不可见，visibilty:hidden元素仍位于流中，因此它们不会与其他元素重叠。

相关文章：