jquery : Parent Detail Table rows

Categories: jQuery

How to build master detail table using jquery

I found this jquery trick and I am reposting it for my own reference here


Expandable “Detail” Table Rows

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() {
.attr(“title”,”Click to expand/collapse”)


Tree Structure

Example Code
$(function() {
$(‘div.tree div:has(div)’).addClass(‘parent’); // Requires jQuery 1.2!
$(‘div.tree div’).click(function() {
var o = $(this);
return false;

Example CSS
div.tree div {
div.tree div.parent div {
div.tree div.parent {
cursor:pointer !important;
background:transparent url(plus.gif) no-repeat top left;
div.tree div.expanded {
background:transparent url(minus.gif) no-repeat top left;

« « Javascript Sprite Framework                        Chrome Laptop CR-48 » »

Comments are closed.