jazmynn
jazmynn

Reputation: 11

jquery to hide column based on td value

I have a page where I am dynamically trying to hide columns in tables of class exception_table based on the value in the td of class tdHideShow.

If the value is not equal to a value the user has selected strDMM, from a dropdown I want to hide the td, thus hiding that column of my table. Something in the syntax of my else is not working correctly, the td is not being hidden.

$('.exception_table',this).each(function(ind,obj){

                if(!($('tr td.tdHideShow',this).hasClass(strDMM))){
                    $(this).hide();
                }
                else{
                    count++;
                }

                $('tr td.tdHideShow',this).each(function(ind,obj){
                        if(!($(this).hasClass(strDMM))){
                            //trying to hide the column if it is missing the class I am looking for
                        }
                });

            });

            if(count==0){
                $(this).parent.hide();
            }

        });  

Here is my sample html. I want any table that does not have class Bob, and hide columns that are not Bob. I am hiding the divs that don't have Bob in any table, hiding the tables that don't have Bob at all. I need to hide the table column in the first div, first table, that contains Billy. The html is dynamic and changes, the user filters on DMM name.

<div class="East">
    <table class="exception_table">
        <tr>
            <td>DMM NAME</td>
            <td class="tdHideShow Bob">Bob</td>
            <td class="tdHideShow Bob">Bob</td>
            <td class= "tdHideShow Billy">Billy</td>

        </tr>
        <tr>
            <td>Sales</td>
            <td>$1</td>
            <td>$5</td>
            <td>$10</td>
        </tr>
        <tr>
            <td>Tenure</td>
            <td>2 years</td>
            <td>2 years</td>
            <td>1 year</td>
        </tr>


    </table>
    <table class="exception_table">
        <tr>
            <td>DMM NAME</td>
            <td class="tdHideShow Paul">Pal</td>
            <td class="tdHideShow Doug">Doug</td>
            <td class= "tdHideShow Joe">Joe</td>

        </tr>
        <tr>
            <td>Sales</td>
            <td>$5</td>
            <td>$6</td>
            <td>$70</td>
        </tr>
        <tr>
            <td>Tenure</td>
            <td>7 years</td>
            <td>9 years</td>
            <td>2 years </td>
        </tr>


    </table>
        <table class="exception_table">
                <tr>
                    <td>DMM NAME</td>
                    <td class="tdHideShow Tim">Tim</td>
                    <td class="tdHideShow Tim">Tim</td>
                    <td class= "tdHideShow Tim">Tim</td>

                </tr>
                <tr>
                    <td>Sales</td>
                    <td>$1</td>
                    <td>$5</td>
                    <td>$10</td>
                </tr>
                <tr>
                    <td>Tenure</td>
                    <td>1 years</td>
                    <td>1 years</td>
                    <td>1 years</td>
                </tr>


    </table>

</div>

</html>

Upvotes: 1

Views: 1587

Answers (1)

Fabian Horlacher
Fabian Horlacher

Reputation: 1919

If you add the classes like class="tdHideShow Bob" to each row, then this will work:

function onlyShow(show) {
    $('.exception_table tr td.tdHideShow').each(function (ind, obj) {
        $(this).hasClass(show) ? $(this).show() : $(this).hide()
    });
}
onlyShow('Bob');

Or the advanced version: https://jsfiddle.net/favvsz9k/

function hideOthers(show) {
    var $table, colNumber, $colHead, $colsCorresponding, visibleCols;
    // loop through each table
    $('.exception_table').each(function (ind, obj) {
        $table = $(this);
        colNumber = 0;
        visibleCols = 0;
        // Check each td of the first column on this table (header elements)
        $table.find('tr:eq(0) td').each(function (ind, obj) {
            $colHead = $(this);
            // Is it a hide/show relevant column?
            if ($colHead.hasClass('tdHideShow')) {
                $colsCorresponding = $table.find('tr td:nth-child(' + colNumber + ')');
                // Should the column be shown?
                if ($colHead.hasClass(show)) {
                    $colsCorresponding.show();
                    visibleCols++;
                } else {
                    $colsCorresponding.hide();
                }
            }
            colNumber++;
        });
        // hide the table if there are no cols visible on it
        visibleCols ? $table.show() : $table.hide();
    });
}
var strDMM = 'Paul';
hideOthers(strDMM);

Upvotes: 1

Related Questions