首页 / 脚本样式 / JavaScript / Expandable "Detail" Table Rows

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.

The only requirements are: 

Put a class of "parent" on each parent row （tr） 
Give each parent row （tr） an id 
Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to 

Example Code
$（function（） {
    $（"tr.parent"）
        .css（"cursor","pointer"）
        .attr（"title","Click to expand/collapse"）
        .click（function（）{
            $（this）.siblings（".child-"+this.id）.toggle（）;
        }）;
    $（"tr[@class^=child-]"）.hide（）.children（"td"）;
}）;Example Table （click a row）