JavaScript einblenden ausblenden Funktion Layout Problem firefox chrome

Question

Ich habe ein asp.net gridview, wo ich ausblenden und zeigen Spalten mit "onclick" auf das ausgewählte Kontrollkästchen. Die ausgeblendeten Spalten werden im IE gut angezeigt, wenn sie angeklickt werden, aber sie überschneiden sich in Chrome und Firefox. Ich muss irgendetwas übersehen, es ist, als ob sie zur gleichen Spalte hinzugefügt werden. Da ich neu bin, kann ich einen Screenshot posten.

Jede Hilfe ist sehr willkommen.

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

Anstatt zu verwenden:

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

... um Tabellenzellen anzuzeigen, versuchen Sie, die Eigenschaft display auf eine leere Zeichenkette zu setzen, damit sie auf den Standardwert zurückgesetzt wird:

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

Answer 2

Versuchen Sie zu verwenden visibility:hidden (und visibility:visible ) anstelle der display css-Eigenschaft. Anders als die display:none Elemente, die visibilty:hidden Elemente sind immer noch im Fluss, auch wenn sie nicht sichtbar sind, so dass sie sich nicht mit anderen Elementen überschneiden.