테이블 행에서 두 번 클릭하여 나머지 행 표시/숨기기

Question

HTML 표 행에 표시/숨기기 메 커닉을 사용하려고합니다. 테이블 행을 더블 클릭하면 detail 클래스가 추가되고 나머지 테이블 행은 숨겨집니다.

여기에 코드입니다 :

<table class='container'> 
    <tr> 
     <th>ID</th> 
     <th>ID1</th> 
     <th>Title</th> 
    </tr> 
    <tr id='7305' class='testtr'> 
     <td>7305</td> 
     <td>7305</td> 
     <td>Title1</td> 
    </tr> 
    <tr id='7381' class='testtr'> 
     <td>7381</td> 
     <td>7381</td> 
     <td>Title2</td> 
    </tr> 
    <tr id='8573' class='testtr'> 
     <td>8573</td> 
     <td>8573</td> 
     <td>Title3</td> 
    </tr> 
</table> 

첫 번째 단계는 작동하지만, 나 자신에 의해 두 번째 단계를 해결할 수 없습니다. 이것을 했는가 :

<script> 
    $(function() { 
     $("table").colResizable({ liveDrag: true }); 
    }); 

    $('.testtr').dblclick(function() { 
     $('.testtr').hide(); 
     $('.testtr').not(this).addClass('hidden'); 
     $(this).show(); 
    }); 
    $('.testr.detail').dblclick(function() { 
     $('hidden').toggle(); 
     $(this).removeClass('detail'); 
    }); 
</script> 

내가 말했듯이, 나는 모든 행을 숨길 수 있지만 ... 숨겨진 행을 다시 볼 수는 없다. 도울 수 있니 ?

Answer 1

사용 toggleClass .Check이 샘플

$(function() { 
 
     // $("table").colResizable({ liveDrag: true }); 
 
    }); 
 

 
    $('.testtr').dblclick(function() { 
 
     // $('.testtr').hide(); 
 
     $('.testtr').not(this).toggleClass('hidden'); 
 
     $(this).toggleClass('detail'); 
 
     //$(this).show(); 
 
    }); 
 
    /* $('.testr.detail').dblclick(function() { 
 
     $('hidden').toggle(); 
 
     $(this).removeClass('detail'); 
 
    });*/

.hidden{ 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class='container'> 
 
    <tr> 
 
     <th>ID</th> 
 
     <th>ID1</th> 
 
     <th>Title</th> 
 
    </tr> 
 
    <tr id='7305' class='testtr'> 
 
     <td>7305</td> 
 
     <td>7305</td> 
 
     <td>Title1</td> 
 
    </tr> 
 
    <tr id='7381' class='testtr'> 
 
     <td>7381</td> 
 
     <td>7381</td> 
 
     <td>Title2</td> 
 
    </tr> 
 
    <tr id='8573' class='testtr'> 
 
     <td>8573</td> 
 
     <td>8573</td> 
 
     <td>Title3</td> 
 
    </tr> 
 
</table>

Answer 2

마지막 함수에서 숨겨진 선택기가 ".hidden"이되어야한다고 생각하십니까?

점을 잊어 버린 것 같습니다. 또한, 추가 한 클래스는 언급 한 것처럼 세부 정보 대신 숨겨져 있습니다. 아마도 문제 일 수도 있습니다.