ezEditTable

Description

ezEditTable is a javascript code aimed at enhancing regular HTML tables by adding features such as inline editing components, advanced selection and keyboard navigation. With just a line of code you can easily convert a regular HTML table in an advanced editable and selectable grid control.

Main features

• Attach to an existing HTML table
• Advanced selection model
• Extended keyboard navigation
• Inline cell or row editing
• Insert and remove rows
• Send changes to server via GET or POST form submission, AJAX requests or by script injection in the head section of the document (only GETs)
• Integration with any server-side technology as this is a pure client-side solution
• Callbacks for all events, and delegates for most actions
• Based on plain javascript, that is, independent from any javascript framework but compatible with any of them (no for..in, no overriding $() etc.)
• Exhaustive documentation and API

Installation

To install ezEditTable unzip the download package and then include the following scripts and stylesheet files in the head section of your page:

	<link href="ezEditTable/ezEditTable.css" rel="stylesheet" type="text/css"/>
	<script src="ezEditTable/ezEditTable.js"></script>

Make sure the table you'd like to make editable or selectable has an unique id and a thead and tbody sections.

Here you have an example of a regular html table:

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

Below the same table enhanced by the script (id="table1"), click to select a row or use keys to move the selection:

From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

There are 2 different ways to call the script:

• invoke the setEditTable function, which returns a EditTable object:

<script language="javascript" type="text/javascript">
	var et = setEditTable("table1");
</script> 

• instanciate the EditTable object:

<script language="javascript" type="text/javascript">
	var et = new EditTable('table1');
	et.Init();
</script> 

If your document contains several tables (like this page), it is important to define unique ids, otherwise the script will not work properly.

The setEditTable() function or the EditTable class accepts 2 additional parameters that will be explained in the next tables. In the example below, by specifing a row number as a "start" row, we tell the script from which row can start the selection, this is helpful when the tbody and thead sections are not defined:

This is the table caption
From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

var et02 = setEditTable("table2", 2);

or

var et02 = new EditTable("table2", 2);
et02.Init();

By default, the script adds a single row selection feature to the table. You could decide to also add a cell selection feature and make the cells editable, double-click on a cell to see:

This is the table caption
From	Destination	Road Distance (km)	By Air (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	25.3
Sydney	Brisbane	982	1.5	16
Sydney	Canberra	286	.6	4.3
Sydney	Melbourne	872	1.1	10.5
Adelaide	Perth	2781	3.1	38
Adelaide	Alice Springs	1533	2	20.25
Adelaide	Brisbane	2045	2.15	40

To do that you just need to declare a literal object (configuration object) in which you specify the features you would like to enable:

<script language="javascript" type="text/javascript">
	var table3Config = {
		default_selection: 'both',
		editable: true,
		auto_save: false						
	}
 	var et03 = setTableEdit("table3", 2, table3Config);
</script>

or

<script language="javascript" type="text/javascript">
	var table3Config = {
		default_selection: 'both',
		editable: true,
		auto_save: false						
	}
	var et03 = new EditTable("table3", 2 ,table3Config);
	et03.Init();
</script>

You can name the configuration object as you want, but don't forget to add it to the parameters of the setEditTable() function or EditTable class. It is important to respect the syntax and naming convention as shown above. page.

Documentation

For more information about the script's configuration check out the documentation page. Complete API documentation is available in the purchased package.

---