jQuery Tips

Purpose

This page lists some tips, tricks, and code samples for the jQuery Javascript Framework. It very well may duplicate solutions found elsewhere, but will focus on things that I have found very useful or interesting.

JQuery Cheat Sheet

A few different versions of my jQuery Cheat Sheet are available here.

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:

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to

$(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');
});

Simple Tree Structure

There is a TreeView plugin for jQuery, and I've even written my own Tree Library to convert plain HTML unordered lists into a expandable/collapsable tree structure.

But using a <UL> list as the basis for a tree has some issues that can be easily overcome by using just a DIV-based structure. Although this doesn't have the advantage of maintaining the semantic markup of a UL list, if you are creating a web application for Javascript is known to be enabled, for example, that may not be a concern. This approach may be easier and work better.

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

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;
}