INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Tables ehancement

Showing / hiding table columns by BillyRayPreachersSon
Posted: 17 Aug 04 (Edited 3 May 06)

This snippet shows you how to toggle entire columns on/off by clicking the table header.

It in no way stops data being presented to those without JavaScript enabled.

Assigning any table a class of "collapseColumns" will automatically attach this "collapsible" behaviour to the table when the page loads.

By default, all data is hidden. To switch this so that the data starts visbile, change the visibility property in the style sheet from "hidden" to "visible".

I've tested this solution in IE6 and FireFix 0.8, and it works fine. It should work in most other browsers, too.

CODE

<html>
<head>
    <style type="text/css">
        table.collapseColumns td {
            visibility: hidden;
        }
    </style>

    <script type="text/javascript">
    <!--
        function setupTables() {
            var tables = document.getElementsByTagName('table');
            for (var tableLoop=0; tableLoop<tables.length; tableLoop++) {
                if (tables[tableLoop].className == 'collapseColumns') {
                    var headerRow = tables[tableLoop].tHead.rows[0].cells;
                    for (var cellLoop=0; cellLoop<headerRow.length; cellLoop++) {
                        headerRow[cellLoop].onclick = toggleColumn;
                        headerRow[cellLoop].style.cursor = 'pointer';
                    }
                }
            }
        }

        function toggleColumn() {
            var table = this.parentNode.parentNode.parentNode;
            var columnNumber = this.cellIndex;
            var isShowing = (table.tBodies[0].rows[0].cells[columnNumber].style.visibility == 'visible');

            var rows = table.tBodies[0].rows;
            for (var rowLoop=0; rowLoop<rows.length; rowLoop++) {
                rows[rowLoop].cells[columnNumber].style.visibility = isShowing ? 'hidden' : 'visible';
            }
        }
    //-->
    </script>
</head>
<body onload="setupTables();">
    <table border="1" class="collapseColumns">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell 1, 1</td>
                <td>Cell 1, 2</td>
                <td>Cell 1, 3</td>
            </tr>
            <tr>
                <td>Cell 2, 1</td>
                <td>Cell 2, 2</td>
                <td>Cell 2, 3</td>
            </tr>
            <tr>
                <td>Cell 3, 1</td>
                <td>Cell 3, 2</td>
                <td>Cell 3, 3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch
http://www.codecouch.com/dan/

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close