td値に基づいてカラムを非表示にするjquery

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を持たないテーブルを必要とし、ボブではない列を非表示にします。私はボブを持っていない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'); 

またはAdvancedバージョン：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);