jquery根据td值隐藏列

Question

我有一个页面，我在其中动态尝试根据类 tdHideShow 的 td 中的值隐藏类 exception_table 表中的列。

如果该值不等于用户选择的值strDMM，我想从下拉列表中隐藏td，从而隐藏我表的该列。我的 else 语法中的某些内容无法正常工作，td 没有被隐藏。

$('.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();
            }

        });  

这是我的示例 html。我想要任何没有 Bob 类的表，并隐藏不是 Bob 的列。我在任何表中隐藏了没有 Bob 的 div，隐藏了根本没有 Bob 的表。我需要隐藏第一个 div 中的表列，第一个表包含比利。 html 是动态的并且会发生变化，用户会根据 DMM 名称进行过滤。

<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>

Answer 1

如果您将class="tdHideShow Bob" 之类的类添加到每一行，那么这将起作用：

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

或高级版：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);