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