JZ Thead Organizer

Description

The Mootools plug-in helps to adjust HTML Table Cell attributes colspan and rowspan automatically. It groups the table header elements if they contain the same values. This plug-in can be integrated DataGrid from the Microsoft .Net framework.

Table layout befor using this plug-in

Temp (C) Country 1 Country 1 Country 1 Country 1 Country 1 Country 1
Temp (C) State 1 State 1 State 2 State 2 State 3 State 3
Temp (C) City 1 City 2 City 3 City 4 City 5 City 6
Record High 34.4 36 36.1 35.6 40.6 37.8
Record Low -17.8 -15.7 -33.9 -36.1 -32.8 -36.1
Average 15 14.5 10.2 9.8 17.3 14.2

Table layout after using this plug-in

Temp (C) Country 1 Country 1 Country 1 Country 1 Country 1 Country 1
Temp (C) State 1 State 1 State 2 State 2 State 3 State 3
Temp (C) City 1 City 2 City 3 City 4 City 5 City 6
Record High 34.4 36 36.1 35.6 40.6 37.8
Record Low -17.8 -15.7 -33.9 -36.1 -32.8 -36.1
Average 15 14.5 10.2 9.8 17.3 14.2

Code Sample

Make proper use of the THEAD and TH elements. Put your table header cells into these elements respectivitly.
	
Temp (C) Country 1 Country 1 Country 1 Country 1 Country 1 Country 1
Temp (C) State 1 State 1 State 2 State 2 State 3 State 3
Temp (C) City 1 City 2 City 3 City 4 City 5 City 6
Include the MooTools Core javascript file. Add the following Javascript code within window.onload() or window.addEvent('domready', function(){...}). You can either provide a HTML tag, a CSS class name, or a DOM Id as the selector.
	new jzTHeadOrganizer('.cssClass'); // select by CSS class
	new jzTHeadOrganizer('domId'); // select by DOM Id
	new jzTHeadOrganizer('table'); // select by HTML tag
	

License

MIT License

Prerequisite

MooTools Core 1.3 (or above), pls visit the official MooTools site for further details

Download

Click here to download 1.0