2014-03-31 2 views
0

테이블이있는 프로토 타입 웹 사이트를 만들고 있습니다. 나는 단지 테이블 내용을 어떻게 필터링 할 수 있는지 알고 싶습니다. 예 저는 '작가'와 '일러스트 레이터'인 버튼이 두 개 있습니다. 버튼을 클릭하면 작가에게 보여 주기만하면됩니다.테이블 필터링

테이블 행 id 클래스를 사용하여 필터링 할 수 있습니까?

처럼 : 그것을 할 수있는 쉬운 방법

<table>  
    <tr class="writer"> 
    <td>John Doe </td> 
    <td>Jan 01, 1980</td> 
    <td>[email protected]</td> 
    </tr> 
    <tr clas="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> 

또는 있는가?

+1

ID는 고유해야합니다. – undefined

+0

http://jsfiddle.net/arunpjohny/SFBr3/1/ –

+0

감사합니다. @ArunPJohny :) – user3079066

답변

1

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

데모처럼 뭔가를 찾고있다 : Fiddle