Hiding table cells/rows with JQuery & IE6/7

kkbigal · 19 Jun 2010 at 17:04

Having an issue with hiding table cells in the aforementioned browsers

The cells hide and the total column collapses up as required, but it seems to hit an invisible barrier, leaving a tiny gap between the top of the total cell and the cell containing the "Click" link, so they don't appear to be on the same line.

I can only assume that IE seems to render something that prevents the cell from closing all the way up, as if the one of the table rows was present.

Chrome and FireFox don't have this problem - the total cell moves into line with the other cell.

Code:

<script type="text/javascript">
        $(document).ready(function () {
            $("#toggler").click(function () {
                if ($(".hideMe").is(':visible')) {
                    $(".hideMe").hide();
                }
                else {
                    $(".hideMe").show();
                }
            });
        });            
    </script>
    <style type="text/css">
        .hideMe
        {
            height: 50px;
        }
        .total
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 630px;" border="1" cellspacing="0">
            <tr>
                <td rowspan="3">
                    <a id="toggler" href="#">Click</a>
                </td>
                <td class="hideMe">
                    1
                </td>
            </tr>
            <tr class="hideMe">
                <td class="hideMe">2</td>
            </tr>
            <tr class="">
                <td class="total">
                    Total
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Any ideas how I can get rid of this annoying gap with IE?

kkbigal · 19 Jun 2010 at 17:46

Came with up with an alternative approach:

Code:

    <script type="text/javascript">
        $(document).ready(function () {
            $(".hideMe2").hide();
            $("#hideToggler").click(function () {
                $(".hideMe").hide();
                $(".hideMe2").show();
            });
            $("#showToggler").click(function () {
                $(".hideMe").show();
                $(".hideMe2").hide();
            });
        });            
    </script>
    <style type="text/css">
        td
        {
            border: 1px solid Black;
        }
        .indicator
        {
            width: 200px;
        }
        .hideMe
        {
            height:50px;
        }
        .hideMe2
        {
            width:200px;
            height: 50px;
        }
        .total
        {
            height: 50px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table style="width: 790px;" border="0" cellspacing="0">
            <tr>
                <td rowspan="3" class="hideMe indicator">
                    <a id="hideToggler" href="#">Hide</a>
                </td>
                <td class="hideMe">
                    1
                </td>
            </tr>
            <tr class="hideMe">
                <td class="hideMe">2</td>
            </tr>
            <tr class="">
                [B]<td class="hideMe2"><a id="showToggler" href="#">Show</a></td>[/B]
                <td class="total">
                    Total
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Added a new cell next to the total cell and made it hidden on page load.

The hideToggler link now hides both the top 2 rows and makes the showToggler cell visible, which appears next to the total column.

This side-steps the problem I was having, but if anyone has a solution to the original way I was approaching things, I'd still be happy to hear them

Hiding table cells/rows with JQuery & IE6/7

kkbigal

kkbigal

kkbigal

kkbigal