Question

I have a asp.net gridview where I hide and show columns using ‘onclick’ on the selected check-box.
The hidden columns are showing fine in IE, when clicked, however they overlap in Chrome, Firefox. I must be missing something, it is as if they get added to the same column. As I am new I can post a screenshot.

Any help greatly appreciated.

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

Instead of using:

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

… to show table cells, try setting the display property to an empty string so that it returns to the default value:

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