Samples

In this page you will find a collection of samples showing how to configure the ezEditTable script.

  • Table 1: call the script
  • Table 2: enable cell selection only
  • Table 3: enable multiple rows selection (click + ctrl or shift key) and define selection's starting row
  • Table 4: disable key navigation and key selection (ctrl and shift key for multiple selection), enable multiple selection (click selection)
  • Table 5: select a row at start and use callback event functions before and after a row is selected
  • Table 6: enable default inline cell editing, double-click on a cell to display cell editor
  • Table 7: define editor type by column, double-click or use F2, enter or spacebar keys to display editor
  • Table 8: use the script's public methods and properties to change features programmatically or to retrieve information
  • Table 9: enable a command type column editor

Here you have a regular HTML table:

WORLD INTERNET USAGE AND POPULATION STATISTICS
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %

Below the same table enhanced by the ezEditTable script:

TABLE 1

Call the script

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	var et1 = setEditTable("table1");
</script>
Top of page

TABLE 2

Enable cell selection only

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">	
	var table2_Config = { default_selection:'cell' };
	var et2 = setEditTable("table2", table2_Config);
</script>
Top of page

TABLE 3

Enable multiple rows selection (click + ctrl or shift key) and define selection's starting row

Group 1 Group 2 Group 3
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">	
	var table3_Config = { selection_model: 'multiple' };	
	var et3 = setEditTable( "table3",table3_Config,3 );
</script>
Top of page

TABLE 4

Disable key navigation and key selection, enable multiple selection (click selection)

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	table4_Config = { key_navigation: false, key_selection: false, selection_model: 'multiple' };
	var et4 = setEditTable("table4", table4_Config);
</script>
Top of page

TABLE 5

Select a row at start and use callback event functions before (on_before_selected_row) and after (on_after_selected_row) a row is selected

 
World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	var table5_Config = { 
		select_row_at_start: true, 
		row_index_at_start: 1, 
		on_before_selected_row: function(o, row){ o.Get('output1').innerHTML = 'Active row: '+row.rowIndex.toString() +' '; },
		on_after_selected_row: function(o, row){ o.Get('output2').innerHTML = 'Active row data:' + o.Selection.GetRowValues(row); },
	};
	var et5 = setEditTable("table5", table5_Config);
</script>
Top of page

TABLE 6

Enable default inline cell editing, double-click on a cell to display cell editor

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	var table6_Config = { editable: true, auto_save: false, default_selection: 'both' };
	var et6 = setEditTable("table6", table6_Config);
</script>
Top of page

TABLE 7

Define editor type by column, double-click or use F2, enter or spacebar keys to display editor

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	var table7_Config = {							
							editable: true,
							auto_save: false,
							default_selection: 'both',
							cell_editors:[
								{ type: 'select', attributes:[['title','Choose a continent']] },
								{ type: 'input', css:'alignRight' },
								{ type: 'textarea', style:'background-color: yellow;' },
								{ type: 'input', attributes:[['maxLength',5],['title','5 chars max']] },
								{ type: 'none' }
							]
						};
var et7 = setEditTable('table7', table7_Config);
</script>
Top of page

TABLE 8

Use the script's public methods and properties to change features programmatically or to retrieve information

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World
Africa 933,448,292 14.2 % 3.5 % 3.0 %
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %
Europe 809,624,686 12.3 % 38.6 % 28.6 %
Middle East 193,452,727 2.9 % 10.0 % 1.8 %
North America 334,538,018 5.1 % 69.4 % 21.2 %
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 % 
<script language="javascript" type="text/javascript">
	var table8_Config = { editable: true, auto_save: false };
	var et8 = setEditTable("table8", table8_Config);
</script>

<!-- buttons code below -->
<input type="button" value="Is selectable?" onClick="alert( et8.IsSelectable() );" />
<input type="button" value="Is editable?" onClick="alert( et8.IsEditable() );" />
<input type="button" value="Clear selections" onClick="et8.ClearSelections();" />
<input type="button" value="Disable edition" onClick="et8.Editable.Remove();" />
<input type="button" value="Enable edition" onClick="et8.Editable.Set();" />
<input type="button" value="Disable selection" onClick="et8.Selection.Remove();" />
<input type="button" value="Enable selection" onClick="et8.Selection.Set();" />
<input type="button" value="Enable multiple selection" onClick="et8.selectionModel = 'multiple';" />
<input type="button" value="Disable multiple selection" onClick="et8.selectionModel = 'single';" />
<input type="button" value="Enable cell selection" onClick="et8.ClearSelections(); et8.defaultSelection = 'cell';" />
<input type="button" value="Disable cell selection" onClick="et8.ClearSelections(); et8.defaultSelection = 'row';" />
<input type="button" value="Enable row editor" onClick="et8.editorModel = 'row';" />
<input type="button" value="Disable row editor" onClick="et8.Editable.CloseRowEditor(); et8.editorModel = 'cell';" />
<input type="button" value="Get active row values" onClick="alert(et8.Selection.GetActiveRowValues());" />
<input type="button" value="Get selected rows values" onClick="alert(et8.Selection.GetSelectedValues());" />
Top of page

TABLE 9

Enable a command type column editor

World Regions Population ( 2007 Est.) Population % of World % Population ( Penetration ) Usage % of World Action
Africa 933,448,292 14.2 % 3.5 % 3.0 %  
Asia 3,712,527,624 56.5 % 10.5 % 35.6 %  
Europe 809,624,686 12.3 % 38.6 % 28.6 %  
Middle East 193,452,727 2.9 % 10.0 % 1.8 %  
North America 334,538,018 5.1 % 69.4 % 21.2 %  
Latin America / Caribbean 556,606,627 8.5 % 16.0 % 8.1 %  
Oceania / Australia 34,468,443 0.5 % 53.5 % 1.7 %   
<script language="javascript" type="text/javascript">
//<![CDATA[
	var table9_Config = {
							editable: true,
							auto_save: false,
							cell_editors:[
								{ type: 'select', attributes:[['title','Choose a continent']] },
								{ type: 'input', css:'alignRight' },
								{ type: 'textarea', style:'background-color: yellow;' },
								{ type: 'input', attributes:[['maxLength',5],['title','5 chars max']] },
								{ type: 'input' },
								{ type: 'command', 
									buttons:{ 
										enable: ['update', 'insert', 'delete', 'submit', 'cancel'], 
										'update': { title:'Edit row' },
										'insert': { title:'Add row'  },
										'delete': { title:'Delete row' },
										'submit': { text:'Save', title:'Save'  },
										'cancel': { text:'Cancel', title:'Cancel' }
									} 
								}
							]
				};
	var et9 = setEditTable("table9", table9_Config);
//]]>
</script>
Top of page

köpa viagra online och cialis, levitra

E.n.j.o.y. ads-free content!
© Max Guglielmi