jquery隱藏基於td值的列

Question

我有一個頁面，我正在動態地嘗試隱藏類exception_table的表中的列基於類tdHideShow中的值。

如果該值不等於用戶已選擇strDMM的值，則從下拉列表中我想隱藏td，從而隱藏我的表的該列。我的其他語法中的某些內容工作不正常，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);