Hierarchical Table Manipulation with jQuery


I recently had to propagate change down a table that represented hierarchical data as well as show and hide columns.  The most important requirement was that the changes should not propagate up any levels, only down.  I have put up a sample on JSBin here that simulates generated HTML from ASP.NET(ie: dynamic control ids).  Most of the manipulation is done with class names.  The show and hide columns could probably have been done better, but you will get the gist.

jQuery functions:

       $(document).ready(function () {
            $('.HideTableDemoTab').click(function () {
                HideTableColumn(this);
            });

            $('.ShowTableDemoTab').click(function () {
                ShowTableColumn(this);
            });

            $('.TableDemoTabShowAll').click(function () {
                ShowAllColumns();
            });

        });

        function PropagateChanges(rowId, inputChanged, inputTarget, level) {
            if ($('.chkPropagate input').attr('checked')) {
                var tableRows = $('.TableDemo > tbody > tr:gt(' + rowId + ')');
                tableRows.each(function () {
                    var tableCells = $(this);
                    var currentLevel = tableCells.find('.Level').val();

                    if (currentLevel < level) {
                        tableCells.find('.' + inputTarget).val($('#' + inputChanged).val());

                    }
                    else {
                        return false; //break out of loop can't change parents

                    }

                });
            }
        }

        function HideTableColumn(column) {
            if (column.id == "tabHideCol1") {
                $("#TableDemo td:nth-child(1)").hide();
            }
            else if (column.id == "tabHideCol2") {
                $("#TableDemo td:nth-child(2)").hide();
            }
            else if (column.id == "tabHideCol3") {
                $("#TableDemo td:nth-child(3)").hide();

            }
        }

        function ShowTableColumn(column) {
            if (column.id == "tabShowCol1") {
                $("#TableDemo td:nth-child(1)").show();
            }
            else if (column.id == "tabShowCol2") {
                $("#TableDemo td:nth-child(2)").show();
            }
            else if (column.id == "tabShowCol3") {
                $("#TableDemo td:nth-child(3)").show();

            }
        }

        function ShowAllColumns() {
            $("#TableDemo td:nth-child(1)").show();
            $("#TableDemo td:nth-child(2)").show();
            $("#TableDemo td:nth-child(3)").show();
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: