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

http://www.javascripttoolbox.com/jquery/

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() {
$(‘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’);
});

 

Tree Structure

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

Example CSS
div.tree div {
padding-left:16px;
}
div.tree div.parent div {
display:none;
cursor:default;
}
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.