JavaScript顯示隱藏功能佈局問題firefox chrome

我有一個asp.net gridview，我在所選的複選框上使用'onclick'隱藏和顯示列。隱藏的列在IE中顯示正常，但單擊時它們在Chrome，Firefox中重疊。我必須錯過一些東西，就好像他們被添加到同一列中一樣。由於我是新手，我可以發佈截圖。JavaScript顯示隱藏功能佈局問題firefox chrome

任何幫助非常感謝。

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>

來源

2012-05-12 stuggyg

而不是使用：

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

...顯示錶格單元格，嘗試顯示屬性設置爲空字符串，使其返回到默認值：

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

來源

2012-05-13 00:28:16 nivlam

這很好用，它可以根據需要正確運行。謝謝。 – stuggyg

嘗試使用visibility:hidden（和visibility:visible），而不是display CSS屬性。與display:none元素不同，visibilty:hidden元素即使不可見也仍在流中，因此它們不會與其他元素重疊。

來源

2012-05-13 00:22:09 mastazi

所以這行：'rows [i] .cells [r] .style.display =「block」;'become：'rows [i] .cells [r] .style.visibility =「visible」;'while the following line：'rows [i] .cells [r] .style.display =「none」;'成爲：'rows [i] .cells [r] .style.visibility =「hidden」;' – mastazi

感謝您的迴應，它離開列空間a它們之間有一個空隙，就像空白一樣。 – stuggyg

好的我沒有真正瞭解你的需求，無論如何用戶nivlam在他的回答中指出了正確的解決方案:-) – mastazi

JavaScript顯示隱藏功能佈局問題firefox chrome

回答

相關問題