확장 가능한 '세부정보' 테이블 Rows_jquery

일반적인 UI에는 데이터 행 테이블이 있으며, 이 테이블을 클릭하면 확장되어 '상위' 행 아래에 '하위' 행의 세부 분석이 표시됩니다.

유일한 요구 사항은 다음과 같습니다.

각 상위 행(tr)에 '상위' 클래스를 배치합니다.
각 상위 행(tr)에 ID를 부여합니다.
각 하위 행을 부여합니다. ID가 속한 상위 tr의 ID인 'child-ID' 클래스

예제 코드
$(function() {
    $('tr.parent')
        .css("커서","포인터")
        .attr("제목","확대/축소하려면 클릭하세요")
        .click(function(){
            $(this).siblings ('.child-' this.id).toggle();
        })
    $('tr[@class^=child-]').hide().children('td');
});표 예(행 클릭)

ID	Name		Total
123	Bill Gates		100
	2007-01-02	A short description	15
	2007-02-03	Another description	45
	2007-03-04	More Stuff	40
456	Bill Brasky		50
	2007-01-02	A short description	10
	2007-02-03	Another description	20
	2007-03-04	More Stuff	20
789	Phil Upspace		75
	2007-01-02	A short description	33
	2007-02-03	Another description	22
	2007-03-04	More Stuff	20