JavaScript show hide関数のレイアウトの問題firefox chrome

Question

私は選択したチェックボックスに 'onclick'を使用して列を非表示にして表示するasp.net gridviewを持っています。 クリックしたときに非表示の列が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> 

Answer 1

：

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

が...表のセルを表示するために、それはデフォルト値に戻りますように空の文字列に表示プロパティを設定してみてください：

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

Answer 2

ではなくdisplay CSSプロパティのvisibility:hidden（およびvisibility:visible）を使用してみてください。 display:none要素とは異なり、visibilty:hidden要素は表示されなくてもまだ流れているので、他の要素と重複しません。代わりに使用したの