过滤表格。如果其中一个规则适用，则显示内容

如果某个人是插图画家或作家，我可以过滤表格。过滤表格。如果其中一个规则适用，则显示内容

<table> 
    <tr class="writer"> 
    <td>John Doe</td> 
    <td>Jan 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="writer illustrator"> 
    <td>Jane Doe</td> 
    <td>Sept 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="illustrator"> 
    <td>Mel Smith</td> 
    <td>Aug 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr class="writer"> 
    <td>Harry Smith</td> 
    <td>Dec 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
</table> 
<button id="writer">writer</button> 
<button id="illustrator">illustrator</button> 
<button id="reset">reset</button>

，这是jQuery的

jQuery(function() { 
$('#illustrator').click(function() { 
    $('table tr.writer').hide(); 
    $('table tr.illustrator').show(); 
}) 
$('#writer').click(function() { 
    $('table tr.writer').show(); 
    $('table tr.illustrator').hide(); 
}) 
$('#reset').click(function() { 
    $('table tr').show(); 
}) 
})

我的问题现在的问题是，如果表行具有相同的类，这个一定行的犯规出现。就像这个例子，当我点击编辑器时，Jane Doe不会出现。我该怎么做呢？谢谢！

来源

2014-03-31 user3079066

只要改变隐藏的秩序，并显示

jQuery(function() { 
    $('#illustrator').click(function() { 
     $('table tr.writer').hide(); 
     $('table tr.illustrator').show(); 
    }) 
    $('#writer').click(function() { 
     $('table tr.illustrator').hide(); 
     $('table tr.writer').show(); 
    }) 
    $('#reset').click(function() { 
     $('table tr').show(); 
    }) 
})

演示：Fiddle

如果你想香料它一点点，你可以用忽略这些项：未选择像

jQuery(function() { 
    $('#illustrator').click(function() { 
     $('table tr:not(.illustrator)').hide(); 
     $('table tr.illustrator').show(); 
    }) 
    $('#writer').click(function() { 
     $('table tr:not(.writer)').hide(); 
     $('table tr.writer').show(); 
    }) 
    $('#reset').click(function() { 
     $('table tr').show(); 
    }) 
})

演示：Fiddle

另一变型，以支持多种类型的是具有用于所述按钮的单个处理器和在其中指定目标类型等

<button class="trigger" data-target="writer">writer</button> 
<button class="trigger" data-target="illustrator">illustrator</button> 
<button class="trigger">reset</button>

然后

jQuery(function() { 
    $('.trigger').click(function() { 
     var target = $(this).data('target'); 
     if (target) { 
      $('table tr:not(.' + target + ')').hide(); 
      $('table tr.' + target).show(); 
     } else { 
      $('table tr').show(); 
     } 
    }) 
})

演示：Fiddle

来源

2014-03-31 06:07:38

只是尝试下面的代码..你需要改变编码的顺序如下所示。

$('#writer').click(function() { 
     $('table tr.illustrator').hide(); 
     $('table tr.writer').show(); 
    })

http://jsfiddle.net/avmCX/23/

来源

2014-03-31 06:09:08 Neel

必须检查元素有没有你的类

jQuery(function() { 
      $('#illustrator').click(function() { 
       $('table tr.writer:not(.illustrator)').hide(); 
       $('table tr.illustrator').show(); 
      }) 
      $('#writer').click(function() { 
       $('table tr.writer').show(); 
       $('table tr.illustrator:not(.writer)').hide(); 
      }) 
      $('#reset').click(function() { 
       $('table tr').show(); 
      }) 
     })

来源

2014-03-31 06:23:06

过滤表格。如果其中一个规则适用，则显示内容

回答

相关问题